使用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 相关文章推荐
jquery遍历input取得input的name
Apr 27 Javascript
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 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
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python实现股市信息下载的方法
2015/06/15 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
python中如何设置代码自动提示
2020/07/15 Python
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
初中三好学生事迹材料
2014/01/13 职场文书
超市国庆节促销方案
2014/02/20 职场文书
小学作文评语大全
2014/04/21 职场文书
教师年度考核评语
2014/04/28 职场文书
环境卫生标语
2014/06/09 职场文书
禁止酒驾标语
2014/06/25 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
办公室岗位职责
2015/02/04 职场文书
债务纠纷代理词
2015/05/25 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
2016年寒假家长评语
2015/10/10 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技