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 相关文章推荐
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 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
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
微信小程序页面开发注意事项整理
2017/05/18 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
python try except 捕获所有异常的实例
2018/10/18 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
印度网上药店:1mg
2017/10/13 全球购物
《问银河》教学反思
2014/02/19 职场文书
英语求职信范文
2014/05/23 职场文书
社团活动总结格式
2014/08/29 职场文书
老公出轨后的保证书
2015/05/08 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL