使用vue-router为每个路由配置各自的title


Posted in Javascript onJuly 30, 2018

传统方法

以前在单页面路由中,就只能在html文件中定一个固定的网站的title。如果想要动态的去修改,需要使用如下的方法。

document.title = '这是一个标题';

这样会让我们做很多无用功。显得十分蠢。

使用Vue-Router的方法

首先打开/src/router/index.js文件。

找到如下代码。

const vueRouter = new Router({
  routes,
  mode: 'history',
  linkActiveClass: 'active-link',
  linkExactActiveClass: 'exact-active-link',
  scrollBehavior (to, from, savedPosition) {
   if (savedPosition) {
    return savedPosition;
   } else {
    return { x: 0, y: 0 };
   }
  },
 });

vueRouter只是一个变量名。叫什么可以根据你自己项目的命名来找,只要是Router实例化的一个对象就OK。然后将上述代码替换成如下代码。

const vueRouter = new Router({
  routes,
  mode: 'history',
  linkActiveClass: 'active-link',
  linkExactActiveClass: 'exact-active-link',
  scrollBehavior (to, from, savedPosition) {
   if (savedPosition) {
    return savedPosition;
   } else {
    return { x: 0, y: 0 };
   }
  },
 });
 vueRouter.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
   document.title = to.meta.title;
  }
  next();
 });

代码的逻辑就是在路由将要发生变化的时候,用传统的方法来对每个将要跳转到的路由的title进行修改。

配置路由

配置好了index.js之后我们就需要去给每个router配置自己的title了。例如。

{
 path: '/',
 name: 'Home',
 component: () => import('@/views/Home/Home'),
 meta: {
  title: '首页',
 },
}

给每个路由加上一个叫meta的属性。meta属性里的属性叫title,也就是每个路由独特的title了。加上之后,浏览器里每个路由都会有自己设置好的title了。

总结

以上所述是小编给大家介绍的使用vue-router为每个路由配置各自的title,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
layui实现动态和静态分页
Apr 28 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 #Javascript
在react中使用vuex的示例代码
Jul 30 #Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 #Javascript
详解如何在微信小程序中愉快地使用sass
Jul 30 #Javascript
详解JSON Web Token 入门教程
Jul 30 #Javascript
JS中Promise函数then的奥秘探究
Jul 30 #Javascript
浅析java线程中断的办法
Jul 29 #Javascript
You might like
main.php
2006/12/09 PHP
什么情况下可以不写PHP的闭合标签“?>”
2014/08/28 PHP
CI框架的安全性分析
2016/05/18 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python求解数组中两个字符串的最小距离
2018/09/27 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
python suds访问webservice服务实现
2020/06/26 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
竞职演讲稿范文
2014/01/11 职场文书
出国签证在职证明
2014/01/16 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
清明节演讲稿
2014/05/27 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
教务处教学工作总结
2015/08/10 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL