各位铁汁们,老步骤先效果图奉上
方法一、使用插件vue-wechat-title来设置浏览器动态标题
第一步:安装插件
1. npm vue-wechat-title --save
第二步:在全局main.js引入、使用该插件
1. import VueWechatTitle from 'vue-wechat-title' //可以动态修改浏览器标题的插件
2. Vue.use(VueWechatTitle);
第三步:在router中的index.js路由下设置mate属性
const routes = [
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
meta:{
title:'关于'
}
},
{
path: '/test',
name: 'Test',
component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue'),
meta:{
title:'测试'
}
},
]
第四步:我们在APP.vue使用vue-wechat-title插件
<router-view v-wechat-title="$route.meta.title"/>
你们看,第一种方法就搞定了,感觉还是挺简单的
方法二、通过路由导航守卫设置
这种方法比使用插件还要简单!
第一步:在router中的index.js路由下设置mate属性
const routes = [
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
meta:{
title:'关于'
}
},
{
path: '/test',
name: 'Test',
component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue'),
meta:{
title:'测试'
}
},
]
第二步:在路由守卫router.beforeEach中设置如下代码
router.beforeEach((to, form, next) => {
if (to.meta.title) {
document.title = to.meta.title
} else {
document.title = '默认标题' //此处写默认的title
}
next()
})
第三步:没有第三步!这样就完成啦!惊不惊喜意不意外!比较简单,推荐使用这个,不用下载插件,直接路由守卫设置即可
说明一下:这两种方法是我在做项目的时候刚好的需求,参考了几位大神的博主完成的,希望有问题的铁汁们多多留言交流,互相学习呀