Vue单页面如何设置title

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ioszhanghui/article/details/95319214
在Vue项目中，是一个单页面应用，也就是只有一个index.html,所有的页面内容都是在这个页面渲染的。那么就带来了一个问题，就是每一个页面的title如何设置。

解决方案：

不使用三方组件 通过在每一个组件的钩子函数，create,或者mouted函数，使用document.title='标题名字';
mounted:function () {
document.title='测试导航栏';
},
使用三方组件 vue-wechat-title组件
安装vue-wechat-title组件 
//安装命令
npm install vue-wechat-title --save
2.在main.js中全局使用

Vue.use(require('vue-wechat-title'))
3.配置每一个跳转路由的title，样式如下:

routes: [
{
path: '/',
name: 'AdminLogin',
component: AdminLogin,
meta:{
title:'登录页面'
}
},
{
path:'/forgetPwd',
component:ForgetPwd,
meta:{
title:'忘记密码'
}
}
]
4.在模板中使用，一般为了避免多次用，可以在APP.vue中设置，可以设置在<div v-wechat-title='$route.meta.title'>或者

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

<div id="app" v-wechat-title='$route.meta.title'>
<router-view v-wechat-title='$route.meta.title'></router-view>
<!-- <router-view/> -->
</div>
学习博客:

https://blog.csdn.net/qq_39702364/article/details/80859980

https://www.jianshu.com/p/fc54e7988436

https://www.cnblogs.com/jiayeyuan/p/10137203.html
————————————————
版权声明：本文为CSDN博主「ioszhanghui」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ioszhanghui/article/details/95319214