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 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 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
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
JavaScript 格式字符串的应用
2010/03/29 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
vue实现图书管理系统
2020/12/29 Vue.js
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
python控制台英汉汉英电子词典
2020/04/23 Python
python实现根据月份和日期得到星座的方法
2015/03/27 Python
Python利用ansible分发处理任务
2015/08/04 Python
python实现自动化上线脚本的示例
2019/07/01 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
如何理解python中数字列表
2020/05/29 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
2014年客户经理工作总结
2014/11/20 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书