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 相关文章推荐
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 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
php文件缓存类汇总
2014/11/21 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
一些mootools的学习资源
2010/02/07 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
javascript的几种写法总结
2016/09/30 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
python读写ini配置文件方法实例分析
2015/06/30 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
建筑设计所实习生自我鉴定
2013/09/25 职场文书
幼儿园长自我鉴定
2013/10/17 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
高考寄语大全
2014/04/08 职场文书
写给老婆的保证书
2015/02/27 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技