vue 동적 설정 페이지 title 방법 실례

2002 단어 vue동태title
본고는 주로 Vue 동적 수정 title의 방법을 소개했는데 필요한 친구는 참고하여 학습할 수 있습니다. 방법은 다음과 같습니다.
1. 사용자 정의 명령을 통해 수정(단일 수정이 좋음)

//1. main.js  
Vue.directive('title', {// 
 inserted: function (el, binding) {
 document.title = el.dataset.title
 }
})
//2. v-title  
<div v-title data-title=" "></div>.
2. 플러그인 vue-wechat-title 사용

//1. 
npm vue-wechat-title --save
//2. main.js 
import VueWechatTitle from 'vue-wechat-title'// title
Vue.use(VueWechatTitle)
//3.   title
   routes: [{
   path: '/login',
   component: Login,
   meta: {
    title: ' '
   }
  }, {
   path: '/home',
   component: Home,
   meta: {
    title: ' '
   }
  },]

//4. app.vue     v-wechat-title
<router-view v-wechat-title='$route.meta.title' />

3. 라우터를 통해.beforeEach 내비게이션 수위가 수정합니다.

//1. router index title
const router = new Router({
 routes: [
  {
   path: '/login',
   component: Login,
   meta: {
    title: ' ',
   },
  },
  {
   path: '/home',
   component: Home,
   meta: {
    title: ' ',
   },
  },
 ],
})
//2. router.beforeEach , title
router.beforeEach((to, from, next) => {
 //beforeEach router , 
 if (to.meta.title) {
  // 
  console.log(to.meta.title)
  document.title = to.meta.title
 } else {
  document.title = ' title'
 }
 next()
})
4. vue-mate를 사용하여 제목 수정
https://github.com/declandewet/vue-meta문서에서 브라우저 쪽과 서버 쪽에서 vue-meta를 사용하여 페이지 헤더 정보를 수정하는 방법을 비교적 상세하게 설명하였다
총결산
vue 동적 설정 페이지 타이틀에 대한 이 글은 여기에 소개되었습니다. 더 많은 vue 동적 설정 페이지 타이틀에 대한 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!

좋은 웹페이지 즐겨찾기