Vue.js项目中管理每个页面的头部标签的两种方法


Posted in Javascript onJune 25, 2018

在 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项目中管理每个页面的头部标签的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
Vue实现购物车功能
Apr 27 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
angularjs结合html5实现拖拽功能
Jun 25 #Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 #Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 #Javascript
JS的函数调用栈stack size的计算方法
Jun 24 #Javascript
JavaScript中var、let、const区别浅析
Jun 24 #Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 #Javascript
Vue中$refs的用法详解
Jun 24 #Javascript
You might like
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
解javascript 混淆加密收藏
2009/01/16 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
javascript实现下雨效果
2017/03/27 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
python实现反转部分单向链表
2018/09/27 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
大堂副理的岗位职责范文
2014/02/17 职场文书
欢迎横幅标语
2014/06/17 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
2015年老干部工作总结
2015/04/23 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript