如何使用Vue检测当前路由来源

在Vue.js框架中，路由管理是构建单页面应用（SPA）不可或缺的一部分。Vue.js官方推荐使用Vue Router进行路由管理。在某些场景下，我们可能需要知道当前页面是由哪个路由跳转来的，以便于执行特定的逻辑。以下是几种在Vue.js中查看路由来源的方法：

1. 使用 `$route`

在Vue组件中，我们可以直接通过`$route`属性来访问当前路由对象。虽然这个对象不直接告诉我们路由的来源，但我们可以通过一些逻辑判断来推断。

例如，在组件的`created`或者`watch`中监控路由的变化：

export default {
created() {
// 判断路由是否发生了变化
this.$watch(
() => this.$route,
(toRoute, fromRoute) => {
// toRoute 是当前路由，fromRoute 是来源路由
console.log('From:', fromRoute.path); // 打印来源路由的路径
}
);
}
}

2. 导航守卫

Vue Router提供了全局的、路由级别的守卫，可以在路由变化时执行一些逻辑。

const router = new VueRouter({ /* ... */ });

router.beforeEach((to, from, next) => {
// to: 即将要进入的目标路由对象
// from: 当前导航正要离开的路由对象
console.log('From:', from.path); // 打印来源路由的路径

// 执行后续逻辑
next();
});

通过`beforeEach`守卫，我们可以在路由跳转前访问到来源路由。

3. 使用组件内部的路由信息

在组件内部，我们也可以通过`data`或者计算属性来保存和计算路由信息。

export default {
data() {
return {
previousRoute: null,
};
},
beforeRouteEnter(to, from, next) {
next(vm => {
vm.previousRoute = from;
});
},
// 或者使用计算属性
computed: {
fromRoute() {
return this.$route.matched[this.$route.matched.length - 2];
}
}
}