使用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的表头固定的若干方法
Jan 27 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
python三引号如何输入
2020/07/06 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
深入探究HTML5的History API
2015/07/09 HTML / CSS
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
护士自我鉴定
2013/10/23 职场文书
高中军训广播稿
2014/01/14 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
会议接待欢迎标语
2014/10/08 职场文书
redis内存空间效率问题的深入探究
2021/05/17 Redis
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android