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 相关文章推荐
jquery控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
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 程序员应该使用的10个组件
2009/10/31 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
设定php简写功能的方法
2019/11/28 PHP
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
python实现mean-shift聚类算法
2020/06/10 Python
Python3开发环境搭建详细教程
2020/06/18 Python
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
服装公司总经理岗位职责
2013/11/30 职场文书
日语专业个人的求职信
2013/12/03 职场文书
高三语文教学反思
2014/01/15 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android
MySQL基于索引的压力测试的实现
2021/11/07 MySQL
pt-archiver 主键自增
2022/04/26 MySQL