Vue动态设置浏览器标签title

一、使用插件vue-wechat-title

        1、安装

npm install vue-wechat-title --save

        2、在main.js中引入

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

        3、在路由里添加title     

routes: [
    {
        path: '/login',
        component: () => import('../views/login.vue'),
        meta: {
            title: '登陆'
        }
     }
]

          4、在app.vue中添加指令

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

二、使用自定义指令

        1、在main.js页面里添加自定义指令

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

        2、在需要修改的页面里添加v-title指令

<div v-title data-title="标题"></div>

三、通过router.beforeEach导航守卫修改title

        1、在router里配置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) => {
    if (to.meta.title) {
        document.title = to.meta.title
    } else {
        document.title = '默认标题'
    }
    next()
})


版权声明:本文为qq_33816425原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。