如何使用Vue实现路由监听

Vue.js 是一种流行的前端框架，它提供了许多功能来帮助开发者构建单页面应用程序（SPA）。其中，Vue Router 是 Vue.js 的官方路由管理器，它允许我们为单页面应用定义路由和子路由，实现不同页面之间的跳转和视图渲染。在 Vue 应用中监听路由变化是一项常见的任务，以下将介绍几种方法来实现这一功能。

方法一：使用 `watch` 选项

在 Vue 组件中，我们可以使用 `watch` 选项来监听 `$route` 对象的变化。

export default {
watch: {
// 监听路由对象
$route(to, from) {
// to: 即将要进入的目标路由对象
// from: 当前导航正要离开的路由对象
// 执行逻辑处理
console.log(`路由从 ${from.path} 变为 ${to.path}`);


}
}
}

方法二：使用组件内的 `beforeRouteUpdate` 钩子

如果你的组件被 `` 渲染，那么你可以使用 `beforeRouteUpdate` 导航守卫。

export default {
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 适用于动态路由或者路径参数的变化
// 执行逻辑处理
console.log(`组件路由从 ${from.path} 更新为 ${to.path}`);
next();
}
}

方法三：使用全局导航守卫

如果你需要在路由发生变化时执行一些全局的逻辑，可以在全局设置导航守卫。

router.beforeEach((to, from, next) => {
// 执行一些逻辑判断
console.log(`全局路由从 ${from.path} 变为 ${to.path}`);
// 确保要调用 next()
next();
});

方法四：监听路由变化事件

Vue Router 提供了一个事件监听的方式，通过 `router` 对象来监听 `route` 的变化。

import router from './router';

router.onReady(() => {
router.beforeEach((to, from, next) => {
// 监听路由变化
console.log(`路由即将变化: ${from.path} -> ${to.path}`);
next();
});
});