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 相关文章推荐
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
Vite + React从零开始搭建一个开源组件库
Jun 25 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 mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
php实现加减法验证码代码
2014/02/14 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
Javascript注入技巧
2007/06/22 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
为Python的web框架编写前端模版的教程
2015/04/30 Python
Python缩进和冒号详解
2016/06/01 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
Python中is与==判断的区别
2017/03/28 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
大四自我鉴定范文
2013/10/06 职场文书
保险公司年会主持词
2014/03/22 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
幼儿园辞职书
2015/02/26 职场文书
2015年质检工作总结
2015/05/04 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
新闻稿件写作范文
2015/07/18 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js