vue嵌套路由/子路由/二级路由跳转title变化解决方案

一级路由跳转title变化

index.js里的路由配置规则

image

像这样首页跳转到登录同是一级路由跳转时改变页面的title标签，只需要在index.js中加入下面这段代码

router.beforeEach((to,from,next) => {
    document.title = to.matched[0].meta.title
    next()
})

二级路由跳转改变title

例如这种跳转到子路由下时，上面的方法就无法实现了，这时候需要使用第二种方式

image

引入第三方插件vue-wechat-title

npm install vue-wechat-title --save

在main.js中引入并使用

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

最后修改App.vue页面中的router-view

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

解决！！

image