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 live()调用不存在的解决方法
Feb 26 Javascript
jquery实现用户打分评分特效
May 28 Javascript
详谈javascript中的cookie
Jun 03 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
小程序关于请求同步的总结
May 05 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 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
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
javascript实现微信分享
2014/12/23 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
python 同时读取多个文件的例子
2019/07/16 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
django框架auth模块用法实例详解
2019/12/10 Python
django列表筛选功能的实现代码
2020/03/27 Python
Django models文件模型变更错误解决
2020/05/11 Python
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
幼儿园秋游活动方案
2014/01/21 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
青春演讲稿范文
2014/05/08 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android