vue.js使用watch监听路由变化的方法


Posted in Javascript onJuly 08, 2018

watch除了可以监听数据的变化,路由的变化也能被其监听到

效果如下:

vue.js使用watch监听路由变化的方法

具体代码

当路由发生变化后,在watch中写具体的业务逻辑

let vm = new Vue({
 el: "#app",
 data: {},
 router,
 watch: {
  '$route.path': function (newVal, oldVal) {
   if (newVal === '/login') {
    console.log('欢迎进入登录页面');
   }
   if (newVal === '/register') {
    console.log('欢迎进入注册页面');
   }
  }
 }
})

vue.js使用watch监听路由变化的方法

下面在单独给大家介绍下Vue 监听路由变化的代码,具体代码如下所述:

watch:{   //监听路由变化
    $route( to , from ){   
       console.log( to , from )
        // to , from 分别表示从哪跳转到哪,都是一个对象
        // to.path  ( 表示的是要跳转到的路由的地址 eg: /home );
     }
}

总结

以上所述是小编给大家介绍的vue.js使用watch监听路由变化的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript学习随笔(使用window和frame)的技巧
Mar 08 Javascript
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
Jquery插件之多图片异步上传
Oct 20 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 #Javascript
jQuery插件实现弹性运动完整示例
Jul 07 #jQuery
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 #Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 #Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 #Javascript
react-native动态切换tab组件的方法
Jul 07 #Javascript
vue.js 实现点击展开收起动画效果
Jul 07 #Javascript
You might like
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
php阳历转农历优化版
2016/08/08 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
Python正则表达式的使用范例详解
2014/08/08 Python
使用Python开发windows GUI程序入门实例
2014/10/23 Python
Python的randrange()方法使用教程
2015/05/15 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
python实现逻辑回归的示例
2020/10/09 Python
10个顶级Python实用库推荐
2021/03/04 Python
HTML5进度条特效
2014/12/18 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
业务代表的岗位职责
2013/11/16 职场文书
战友聚会邀请函
2014/01/18 职场文书
犯错检讨书
2014/02/21 职场文书
北京英语导游词
2015/02/12 职场文书
2015年英语教师工作总结
2015/05/20 职场文书