Vue.js项目中管理每个页面的头部标签的两种方法
更新时间：2018年06月25日 09:01:16 投稿：mrr
这篇文章主要介绍了Vue.js项目中管理每个页面的头部标签的两种方法,需要的朋友可以参考下
在 Vue SPA 应用中，如果想要修改 HTML 的头部标签，如页面的 title ，我们只能去修改 index.html 模板文件，但是这个是全局的修改，如何为每个页面都设置不一样的 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，便可轻松实现头部标签的管理
- metaInfo 的数据都是响应的，如果数据变化，头部信息会自动更新
- 支持 SSR
在页面里面增加 metaInfo 选项
export default {
data() {
return {
myTitle: '标题'
}
},
metaInfo: {
title: this.title,
titleTemplate: '%s - by - vue-meta',
htmlAttris: {
lang: 'zh'
},
script: ''
}
... ...
}
更多vue-meta使用请参考Github官网： https://github.com/declandewet/vue-meta
总结
以上所述是小编给大家介绍的Vue.js项目中管理每个页面的头部标签的两种方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本篇文章主要介绍了vue如何在自定义组件中使用v-model，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
本篇文章通过实例给大家分享了vue自动化表单的操作方法以及相关的代码做了描述，有兴趣的朋友可以跟着学习下。2018-05-05
这篇文章主要介绍了简单的vuex 的使用案例笔记,本文通过demo 是一个 改变 app 的模式 的一个appellation ，选择是 夜间模式还是白天模式，具体代码大家参考下本文2018-04-04
这篇文章主要介绍了详解刷新页面vuex数据不消失和不跳转页面的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了vue-cli 如何打包上线的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了 Vue路由跳转步骤详解，主要介绍当访问API成功后跳转到新的Vue页面怎么处理，感兴趣的朋友跟随小编一起看看吧2023-07-07
LRU算法全称为least recently use 最近最少使用，核心思路是最近被访问的以后被访问的概率会变高，那么可以把之前没被访问的进行删除，维持一个稳定的最大容量值，从而不会导致内存溢出。2021-05-05
这篇文章主要介绍了vue3封装Element导航菜单的实例代码,分为菜单数据格式示例,控制导航收缩的详细代码,本文通过实例代码介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要介绍了Vue3中结合ElementPlus实现弹窗的封装方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
在Vue中，组件是构建用户界面的基本单位，封装公共组件是一种良好的实践，可以提高代码的可复用性和可维护性，下面我们就来看看如何封装一个公共的按钮组件吧2023-08-08
最新评论