vue监听路由变化的几种方式小结
目录
- 监听路由变化的几种方式小结
- 一、监听路由从哪儿来到哪儿去
- 二、监听路由变化获取新老路由信息
- 三、监听路由变化触发方法
- 四、全局监听路由
- 如何在组件中监听路由参数的变化?
- 方式一: 监听 $route
- 方式二:通过组件内的导航守卫
监听路由变化的几种方式小结
vue页面开发中,我们经常需要根据路由的变化去实现一些操作,那么如何监听路由的变化呢?当然是利用VUE中的watch,请看代码。
一、监听路由从哪儿来到哪儿去
watch:{ $route(to,from){ console.log(from.path);//从哪来 console.log(to.path);//到哪去 } }
二、监听路由变化获取新老路由信息
watch:{ $route:{ handler(val,oldval){ console.log(val);//新路由信息 console.log(oldval);//老路由信息 }, // 深度观察监听 deep: true } }
三、监听路由变化触发方法
methods:{ getPath(){ console.log(1111) } }, watch:{ '$route':'getPath' }
四、全局监听路由
在app.vue的create种加入下面代码,然后进行判断
this.$router.beforeEach((to, from, next) => { console.log(to); next(); });
如何在组件中监听路由参数的变化?
当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。
因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。
那如果我们要在组件中监听路由参数的变化,就只能通过watch (监测变化) $route 对象,或使用 beforeRouteUpdate 的组件内守卫。
方式一: 监听 $route
const User = { template: '...', watch: { $route(to, from) { // 对路由变化作出响应... } } }
方式二:通过组件内的导航守卫
beforeRouteUpdate ,(和created(){}生命周期函数同级别)
const User = { template: '...', beforeRouteUpdate(to, from, next) { // react to route changes... // don't forget to call next() } }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)