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>

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

관련 권장 사항:

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

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

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

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