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 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
javascript中length属性的探索
Jul 31 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
vue移动端路由切换实例分析
May 14 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
php中fgetcsv()函数用法实例
2014/11/28 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
python简单的函数定义和用法实例
2015/05/07 Python
python去掉行尾的换行符方法
2017/01/04 Python
python如何实现数据的线性拟合
2019/07/19 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
numpy 声明空数组详解
2019/12/05 Python
浅析Python面向对象编程
2020/07/10 Python
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
Java servlet面试题
2012/03/04 面试题
服装厂厂长职责
2013/12/16 职场文书
旅游项目开发策划书
2014/01/18 职场文书
预备党员转正考核材料
2014/06/03 职场文书
防火标语大全
2014/10/06 职场文书
教师节标语大全
2014/10/07 职场文书
单位委托函范文
2015/01/29 职场文书
走进毛泽东观后感
2015/06/04 职场文书
详解nginx location指令
2022/01/18 Servers