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 相关文章推荐
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
JavaScript 命名空间 使用介绍
Aug 29 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 Javascript
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
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
解决Python对齐文本字符串问题
2019/08/28 Python
python实现大学人员管理系统
2019/10/25 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
产品质量承诺范本
2014/03/31 职场文书
倡导文明标语
2014/06/16 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
python pyhs2 的安装操作
2021/04/07 Python
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
使用MybatisPlus打印sql语句
2022/04/22 SQL Server
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle