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 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
location.search在客户端获取Url参数的方法
Jun 08 Javascript
JS面向对象编程浅析
Aug 28 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
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
改变Apache端口等配置修改方法
2008/06/05 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
浅谈php的优缺点
2015/07/14 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
js left,right,mid函数
2008/06/10 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
用Python编写一个国际象棋AI程序
2014/11/28 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
Python持续监听文件变化代码实例
2020/07/22 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
幼儿园教师国培感言
2014/02/02 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
黄埔军校观后感
2015/06/10 职场文书
小学运动会入场词
2015/07/18 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript
Redis Lua脚本实现ip限流示例
2022/07/15 Redis