vue 实现路由跳转时更改页面title


Posted in Javascript onNovember 05, 2019

一、router文件夹下的index文件中给每个path添加meta:{}:

export default new Router({
 routes: [
 {
  path: '/',
  name: 'index',
  component: index,
  meta: {
   title: 'title1'
  }
 },
 {
  path: '/studentInfo',
  name: 'studentInfo',
  component: studentInfo,
  meta: {
   title: 'title2'
  }
 }   
 ]
})

二、js入口文件main.js中添加代码:

router.beforeEach((to, from, next) => {
 /* 路由发生变化修改页面title */
 if (to.meta.title) {
  document.title = to.meta.title
 }
 next()
})

效果:

vue 实现路由跳转时更改页面title

以上这篇vue 实现路由跳转时更改页面title就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS完成代码前最好对其做5件事
Apr 07 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
详解Angular 4 表单快速入门
Jun 05 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
ant design实现圈选功能
Dec 17 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
Node.js开发之套接字(socket)编程入门示例
Nov 05 #Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 #Javascript
node.js域名解析实现方法详解
Nov 05 #Javascript
node.js文件操作系统实例详解
Nov 05 #Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 #Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 #Javascript
js实现随机点名程序
Sep 17 #Javascript
You might like
MySQL相关说明
2007/01/15 PHP
php 不同编码下的字符串长度区分
2009/09/26 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
JavaScript中的其他对象
2008/01/16 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
js实现导航跟随效果
2018/11/17 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
python实现简单的TCP代理服务器
2014/10/08 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
python实现图像识别功能
2018/01/29 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
MySQL面试题
2014/01/12 面试题
高中毕业生自我鉴定范文
2013/09/26 职场文书
个人委托书如何写
2014/09/25 职场文书
2014年派出所工作总结
2014/11/21 职场文书
2014年管理工作总结
2014/11/22 职场文书
实习介绍信范文
2015/05/05 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
Android中View.post和Handler.post的关系
2022/06/05 Java/Android