1. 在router/index.js中
2.在main.js中设置路由守卫
具体操作如下
同上在 router/index.js 中
在项目的根目录下
在main.js中引入并且使用该插件
修改App.vue的路由标签
1. 在router/index.js中使用meta属性的title设置好每个路由对应的title值
/* router/index.js: */
routes: [
{
path: '/',
component: () => import('../login'),
name: 'login',
meta: {
title: '用户登录'
}
},
//.............
]
2.在main.js中设置路由守卫
vue页面切换时，网页title随之切换
/* main.js: */
/*路由守卫*/
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
按照常规步骤设置好路由的title，vue页面切换时，也确实实现了title的变化，但是我发现刷新页面之后title失效了！！！！
百度之后，发现很多人用 ‘ vue-wechat-title ’ 插件来设置title，尝试了一下，确实解决了我的问题
具体操作如下 同上在 router/index.js 中使用meta属性的title设置好每个路由对应的title值
在项目的根目录下打开命令行，通过npm install vue-wechat-title --save来安装该插件：（有一些编辑器自带Terminal命令行操作台，比如我用的WebStorm，可根据个人情况操作。）
在main.js中引入并且使用该插件import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
修改App.vue的路由标签
在 router-view 标签上添加 v-wechat-title='$route.meta.title' ：
<template>
<div id="app">
<router-view v-wechat-title='$route.meta.title'/>
</div>
</template>
自此，问题解决，以此给自己做个记录。
不知道别的小伙伴有没有遇到像我一样的问题，刷新页面之后title失效了，我百度了一下好像没有相关词条，如果有小伙伴遇到了跟我一样的问题，希望也能帮助到你。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易知道(ezd.cc)。
