vue单页面应用根据路由动态修改title

1、通过全局前置守卫beforeEach

const router = new Router({
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
            meta: { title: '首页' }
        }
    ]
})
router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
        document.title = to.meta.title || '首页'
    }
    next()
})
复制代码

2、插件 第一步安装：

npm install vue-wechat-title --save
复制代码

第二步引入插件： 项目入口文件main.js引入并使用

import VuewechatTitle from 'vue-wechat-title'
Vus.use(VuewechatTitle)

router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
        document.title = to.meta.title || '首页'
    }
    next()
})
复制代码

第三步设置使用title： 在你需要改变的页面 第一个div 上加上v-wechat-title="this.title", title 是下面再 data 里面定义的数据.

<template>
    <div v-wechat-title="this.title">
</template>
export default {
    data(){
        return {
            title: '首页'
        }
    }
}
复制代码

两种方法，看项目具体情况吧。希望点赞来！！！