vue修改网站标题title的三种方法

方法一

  调用Vue.directive()

1.main.js里面添加一个全局指令

Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = el.dataset.title
  }
})

2.调用的组件里面，随便找一个div加入，v-title data-title="你的标题"

方法二

利用路由的导航守卫beforeEach在每次页面跳转前更改对应的title

1.router中给每个路由加上meta属性

{
            path: '/login',
            name: 'login',
            component(resolve) {
                require(['./views/login.vue'], resolve)
            },
            meta: {
                title: '登录页',
                keepAlive: true, // 需要被缓存
            }
}

2.在main.js里面加上导航守卫

router.beforeEach((to, from, next) => {
    //路由发生改变时,触发
    window.document.title = to.meta.title == undefined ? '默认标题' : to.meta.title
    if (to.meta.requireAuth) {        
        let token = Cookies.get('access_token');        
        let anonymous = Cookies.get('user_name');        
        if (token) {                             
             next({                    
                 path: '/login',  
                 query: {       
                     redirect: to.fullPath                    
                 }
             })             
        } 
    }    
    next();
})

方法三

1.安装插件 npm install vue-wechat-title  --save

2.引入插件，main.js中import

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

3.路由配置文件router.js里面配置的页面标题

routers: [{
    path: '/',
    name: 'index',
    component: Index,
    meta: {
        title: 'title'
    }
}]

4.app.vue里面添加指令v-wechat-title即可

//来自官方npm页面