Vue单页面如何设置title
在Vue项目中,是一个单页面应用,也就是只有一个index.html,所有的页面内容都是在这个页面渲染的。那么就带来了一个问题,就是每一个页面的title如何设置。解决方案:不使用三方组件 通过在每一个组件的钩子函数,create,或者mouted函数,使用document.title='标题名字';mounted:function () {document.title='...
·
在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
更多推荐
已为社区贡献10条内容
所有评论(0)