vue2 단일 페이지에서 웹 페이지 제목을 설정하는 방법을 간략하게 이해합니다.

Vue, React 등과 같은 프런트엔드 프레임워크는 단일 페이지 애플리케이션입니다. 이는 전체 웹 사이트가 실제로 인덱스 페이지라는 것을 의미합니다. 소위 페이지 점프는 index.html의 콘텐츠와 제목을 대체합니다. 페이지는 각 페이지에 있습니다. 페이지가 초기화될 때 한 번만 설정됩니다. 현재 프런트엔드 프레임워크에서는 각 페이지에 제목 태그를 설정하는 기존 방법이 불가능합니다. 이 글은 주로 vue2에서 단일 페이지에 웹 페이지 제목을 설정하는 방법을 소개하는데, 편집자는 이것이 꽤 좋다고 생각합니다. 이제 여러분에게 공유하고 참고할 수 있기를 바랍니다.

vue-wechat-title 플러그인을 사용하는 것이 좋습니다

플러그인 종속 항목을 다운로드하여 설치하세요

npm install vue-wechat-title --save

main.js에 플러그인을 소개하세요

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

라우팅 파일 index.js title의 각 경로에 추가하세요

 routes: [{
  path: '/',
  name: 'index',
  component: index,
  meta:{
    title:'首页' // 标题设置在这里
  }
 },{
  path:'/detail',
  name:'detail',
  component:detail,
  meta:{
    title:'详情页' // 标题设置在这里
  }
 }]

app.vue

<router-view v-wechat-title=&#39;$route.meta.title&#39;></router-view>

다시 시작하고 시도해 보세요. 작동합니다

관련 권장 사항:

포커스 상실 시 웹페이지 제목 변경 구현에 대한 자세한 설명 방법

htmlb2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f 태그에 아이콘을 추가하면 웹페이지의 로고 아이콘이 왼쪽에 표시됩니다. 웹페이지 제목

JS를 사용하여 깜박이는 프롬프트 효과를 실행하는 매우 간단한 웹페이지 제목 제목을 구현합니다. code_javascript 기술

위 내용은 vue2 단일 페이지에서 웹 페이지 제목을 설정하는 방법을 간략하게 이해합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!