伊布,点石成金的故事,武侠小说全集下载
在 vue spa 应用中,如果想要修改 html 的头部标签,如页面的 title ,我们只能去修改 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title 呢?下面介绍两种方法。
使用router.meta
在路由里面配置每个路由的地址:
routes: [ { /* (首页)默认路由地址 */ path: '/', name: 'entrance', component: entrance, meta: { title: '首页入口' } }, { /* 修改昵称 */ path: '/modifyname/:nickname', name: 'modifyname', component: modifyname, meta: { title: '修改昵称' } } ]
在每一个 meta 里面设置页面的 title 名字,最后在遍历
router.beforeeach((to,from, next) => { /* 路由发生变化修改页面title */ if (to.meta.title) { document.title = to.meta.title } next(); });
这样就为每一个vue 的页面添加了title。
使用vue-meta插件
vue-meta 主要用于管理 hmtl 头部标签,同时也支持 ssr。
vue-meta有以下特点:
在页面里面增加 metainfo 选项
export default { data() { return { mytitle: '标题' } }, metainfo: { title: this.title, titletemplate: '%s - by - vue-meta', htmlattris: { lang: 'zh' }, script: '' } ... ... }
更多vue-meta使用请参考github官网:
总结
以上所述是小编给大家介绍的vue.js项目中管理每个页面的头部标签的两种方法,希望对大家有所帮助
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论