vue监听路由变化的几种方式小结 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