vue修改title

　　之前試了好多方法，下面是親自測試成功的兩種方法。

方法一：利用路由導航守衛

1.先在index.js檔案中加上meta屬性

{
    path: '/index',
    name: 'index',
    component:()=>import('@/views/index'),
    meta: { title: '首頁' }
}    
{
　　path:'/login',
　　name:'login',
　　component:()=>import('@/views/login')
　　meta: { title: '登入頁'}
}

2.在main.js中加上導航守衛

記得將資料快取，不然重新整理頁面後，title顯示的內容就變了

router.beforeEach((to,from,next){
    if(to.meta.title) {
　　　　document.title=to.meta.title
　　　　Cookies.set('title',document.title)
　　}
　　next()
})

new Vue({
  router,
  store,
  beforeCreate() {
    const title_ = Cookies.get('title')
    document.title = title_
  },
 

  render: h => h(App)
}).$mount('#app')
window.Vue = Vue

方法二：使用外掛

1.安裝外掛

npm install vue-wechat-title --save

2.在main.js中引用、使用外掛

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

3.在路由配置檔案配置meta屬性

{
    path: '/index',
    name: 'index',
    component:()=>import('@/views/index'),
    meta: { title: '首頁' }
}    
{
　　path:'/login',
　　name:'login',
　　component:()=>import('@/views/login')
　　meta: { title: '登入頁'}
}
 

4.在app.vue中新增v-wechat-title指令

<router-view v-wechat="$route.meta.title"></router-view>