vue修改title

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>