vue.js使用watch监听路由变化的方法
2018-07-08 09:53
1486 查看
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 监听路由变化的代码,具体代码如下所述:
watch:{ //监听路由变化 $route( to , from ){ console.log( to , from ) // to , from 分别表示从哪跳转到哪,都是一个对象 // to.path ( 表示的是要跳转到的路由的地址 eg: /home ); } }
总结
以上所述是小编给大家介绍的vue.js使用watch监听路由变化的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
您可能感兴趣的文章:
相关文章推荐
- 使用vue.js在页面内组件监听scroll事件的方法
- 使用watch监听路由变化和watch监听对象
- 【vue】——使用watch 观察路由变化,重新获取内容
- Vue.js路由组件vue-router使用方法详解
- 基于vue-cli的vue项目之vuex的使用5------watch监听vuex内部数据变化
- vue使用watch 观察路由变化,重新获取内容
- Vue数据监听方法watch的使用
- Vue.js路由组件vue-router的使用方法
- 基于vue-cli的vue项目之vuex的使用5------watch监听vuex内部数据变化
- Vue.js框架路由使用方法实例详解
- vue使用watch 观察路由变化,重新获取内容
- vue.js 中如何监听watch:{}对象中的某个属性的变化,做相应的操作
- 使用watch监听路由变化和watch监听对象的实例
- Vue.js路由vue-router使用方法详解
- 浅谈Angular.js中使用$watch监听模型变化
- angularjs $watch监听模型变化
- 关于Vue.js 使用v-cloak后仍显示变量的解决方法
- iOS用WKWebView与JS交互获取系统图片及WKWebView的Alert,Confirm,TextInput的监听代理方法使用,屏蔽WebView的可选菜单
- angularjs $scope.$watch(),监听值得变化
- 用Vue.js实现监听属性的变化