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 相关文章推荐
简单的无缝滚动程序-仅几行代码
May 08 Javascript
javascript form 验证函数 弹出对话框形式
Jun 23 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
js实现旋转的星空效果
Nov 01 Javascript
JS如何判断对象是否包含某个属性
Aug 29 Javascript
原生JavaScript实现幻灯片效果
Feb 19 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
几种显示数据的方法的比较
2006/10/09 PHP
简单的页面缓冲技术
2006/10/09 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
Python flask框架post接口调用示例
2019/07/03 Python
python多任务之协程的使用详解
2019/08/26 Python
Django实现分页显示效果
2019/10/31 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
keras得到每层的系数方式
2020/06/15 Python
Python程序慢的重要原因
2020/09/04 Python
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
应届硕士毕业生自荐信
2014/05/26 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
七年级英语教学反思
2016/02/15 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS