vue动态设置title标签
1.router内设置export default[{path: '/',name: 'Home',component: r => require.ensure([], () => r(require('@/components/HelloWorld.vue')), 'Home'),...
·
1.router内设置
export default [
{
path: '/',
name: 'Home',
component: r => require.ensure([], () => r(require('@/components/HelloWorld.vue')), 'Home'),
alias: '/home/index',
meta: { title: '首页',content: 'disable'},
},
]
2.main.js里面设置
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面meta */
if(to.meta.content){
let head = document.getElementsByTagName('head');
let meta = document.createElement('meta');
meta.content = to.meta.content;
head[0].appendChild(meta)
}
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next()
});
====== 更新 ========================
发现bug:刷新的时候,title设置丢失
解决方案:直接在路由配置 路由独享守卫,但是造成代码冗余,没有更好的方案啦~~~
更多推荐
已为社区贡献14条内容
所有评论(0)