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 浮动导航栏实现代码
Aug 27 Javascript
JS+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 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
PHP5+UTF8多文件上传类
2008/10/17 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
深入理解vue-router之keep-alive
2017/08/31 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
python调用cmd命令行制作刷博器
2014/01/13 Python
python模拟鼠标拖动操作的方法
2015/03/11 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
Python实现TCP通信的示例代码
2019/09/09 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
介绍一下MD5加密算法
2016/11/12 面试题
学生会干部自我鉴定2014
2014/09/18 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
python实现局部图像放大
2021/11/17 Python