一、路由对象的含义
在Vue中，路由就是指用户在浏览器中所访问的URL路径。在使用Vue Router进行路由管理时，我们可以通过$router对象访问当前路由信息。$router对象是Vue Router自动生成的一个路由实例，可以用来操作路由信息，例如获取当前路由路径。
二、获取当前路由路径的几种方法
1. 通过$route对象获取
在Vue中，$route对象用来表示当前激活的路由信息。通过$route对象可以获取当前路由的各种相关信息，例如路由路径、参数、查询、哈希值等。下面是通过$route对象获取当前路由路径的代码示例：
mounted() {
console.log(this.$route.path);
}
2. 通过$router对象获取
除了通过$route对象来获取当前路由路径之外，还可以通过$router对象获取。$router对象是Vue Router自动生成的一个路由实例，可以用来操作路由信息。下面是通过$router对象获取当前路由路径的代码示例：
mounted() {
console.log(this.$router.currentRoute.path);
}
3. 通过watch监听$route的变化获取
另外，我们还可以通过$watch监听$route对象的变化，并在$watch回调函数中获取当前路由路径。这种方法比较适合在需要实时监测路由变化的情况下使用，例如页面切换、菜单激活等。下面是通过$watch监听$route变化获取当前路由路径的代码示例：
watch: {
'$route'(to, from) {
console.log(to.path);
}
}
三、路由钩子函数中获取当前路由路径
除了在组件中获取当前路由路径之外，还可以在路由钩子函数中获取当前路由路径。Vue Router提供了多个路由钩子函数，可以在不同的路由阶段进行特定的操作。我们可以在这些路由钩子函数中获取当前路由路径。下面是在beforeEach路由钩子函数中获取当前路由路径的代码示例：
router.beforeEach((to, from, next) => {
console.log(to.path);
next();
});
四、总结
在Vue中，获取当前路由路径是一个比较常见的需求。我们可以通过$route对象、$router对象、$watch、路由钩子函数等多种方式来获取当前路由路径。根据具体的需求和场景，我们可以选择不同的方式来获取当前路由路径。
原创文章，作者：OOHRG，如若转载，请注明出处：https://www.506064.com/n/332311.html
微信扫一扫 
支付宝扫一扫 