使用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分页函数代码
Sep 10 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 Javascript
js+css3实现简单时钟特效
Sep 13 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
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扩展图文教程
2008/12/12 PHP
php中大括号作用介绍
2012/03/22 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
php依赖注入知识点详解
2019/09/23 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
老生常谈Python基础之字符编码
2017/06/14 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
python之生成多层json结构的实现
2020/02/27 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
县优秀教师事迹材料
2014/01/31 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
写给医院的感谢信
2015/01/22 职场文书
民事诉讼代理词
2015/05/25 职场文书
征求意见函
2015/06/05 职场文书
运动会广播稿300字
2015/08/19 职场文书