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 相关文章推荐
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
浅析Angular19 自定义表单控件
Jan 31 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
js实现时分秒倒计时
Dec 03 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
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
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
javascript 写类方式之九
2009/07/05 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
python logging.info在终端没输出的解决
2020/05/12 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
佳能法国商店:Canon法国
2019/02/14 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
公司承诺书范文
2014/05/19 职场文书
本科生就业推荐信
2014/05/19 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python