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 Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
javascript对象的相关操作小结
May 16 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 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函数之子字符串替换 str_replace
2011/03/23 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
js cookies实现简单统计访问次数
2009/11/24 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
基于JQuery的密码强度验证代码
2010/03/01 Javascript
基于js disabled="false"不起作用的解决办法
2013/06/26 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
用JS实现选项卡
2020/03/23 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
如何通过python画loss曲线的方法
2019/06/26 Python
python、Matlab求定积分的实现
2019/11/20 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
超市实习总结自我鉴定
2013/09/19 职场文书
工商管理本科毕业生求职信范文
2013/10/05 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
基于Python实现对比Exce的工具
2022/04/07 Python
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS