获取 Vue 中当前路由：便捷指南

在 Vue 应用程序中，获取当前路由对于构建动态和响应式用户界面至关重要。Vue 提供了多种方法来实现这一目标，本文将探讨这些方法并提供详细的示例。

获取 Vue 中当前路由：便捷指南

1. 使用 `$route` 对象

`$route` 对象是 Vue 组件中提供的一个内置对象，它提供了有关当前路由的详细信息，包括：

`path`：当前路由的路径 `query`：URL 查询参数对象 `params`：动态路由段对象 `fullPath`：包括查询参数的完整路径 `name`：路由的名称（如果已定义）

示例：

```javascript import Vue from "vue";

export default { mounted() { console.log(this.$route.path); // 输出当前路由的路径 } }; ```

2. 使用 `useRoute` 钩子

`useRoute` 钩子是 Vue 3 中引入的一种新方法，它返回一个响应式 `route` 对象，该对象提供了当前路由的详细信息。

示例：

```javascript import { useRoute } from "vue-router";

export default { setup() { const route = useRoute(); console.log(route.path); // 输出当前路由的路径 return { route }; } }; ```

3. 使用 `watch` 监视路由更改

`watch` 选项允许您监视路由上的变化并执行所需的更新。

示例：

```javascript export default { watch: { "$route": { handler(newRoute) { console.log(newRoute.path); // 输出新路由的路径 }, immediate: true // 立即执行处理器 } } }; ```

4. 使用 `$router` 和 `currentRoute`

`$router` 对象是 Vue 应用程序的根实例中可用的一个全局对象。它提供了 `currentRoute` 属性，该属性返回一个包含当前路由详细信息的对象。

示例：

```javascript this.$router.currentRoute.path; // 输出当前路由的路径 ```