vue获取当前路由路径详解

一、路由对象的含义

在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、路由钩子函数等多种方式来获取当前路由路径。根据具体的需求和场景，我们可以选择不同的方式来获取当前路由路径。