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 相关文章推荐
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
页面使用密码保护代码
Apr 10 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
Angular学习教程之RouterLink花式跳转
May 03 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 smarty的预保留变量总结
2008/12/04 PHP
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
基于php编程规范(详解)
2017/08/17 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
新闻内页-JS分页
2006/06/07 Javascript
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
使用cx_freeze把python打包exe示例
2014/01/24 Python
爬山算法简介和Python实现实例
2014/04/26 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
animation和transition的区别
2020/10/12 HTML / CSS
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
酒店办公室文员岗位职责
2013/12/18 职场文书
药品采购员岗位职责
2014/02/08 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
新年团拜会主持词
2014/04/02 职场文书
党支部先进事迹材料
2014/12/24 职场文书
电气工程师岗位职责
2015/02/12 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
JS数组的常用方法整理
2021/03/31 Javascript