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

3,774 阅读1分钟

一级路由跳转title变化

index.js里的路由配置规则

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

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

二级路由跳转改变title

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

引入第三方插件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"/>

解决!!