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 相关文章推荐
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
浅谈JS运算符&&和|| 及其优先级
Aug 10 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
golang与PHP输出excel示例
2016/07/22 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
JQUERY获取form表单值的代码
2010/07/17 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
关于Python的一些学习总结
2018/05/25 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
python中append函数用法讲解
2020/12/11 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
python中pdb模块实例用法
2021/01/15 Python
Python LMDB库的使用示例
2021/02/14 Python
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
专科应届生求职信
2013/11/24 职场文书
培训研修方案
2014/06/06 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript