使用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复选框CHECKBOX全选,取消全选
Aug 30 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 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
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
Python登录系统界面实现详解
2019/06/25 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
python如何爬取网页中的文字
2020/07/28 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
聊聊python中的循环遍历
2020/09/07 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
什么是Web Service?
2012/07/25 面试题
保安员岗位职责
2013/11/17 职场文书
简单而又朴实的个人求职信分享
2013/12/12 职场文书
出纳员的岗位职责
2014/02/22 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
政府会议通知范文
2015/04/15 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
实习报告范文
2019/07/30 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL