面试题：在 Vue 组件中如何获取当前的路由信息？

在 Vue 组件中，可以通过 Vue Router 提供的 API 获取当前的路由信息。以下是几种常见的方式：

1. 通过 `this.$route` 获取

作用：this.$route 是 Vue Router 注入到每个组件中的路由对象，包含当前路由的信息。
常用属性：
- path：当前路由的路径（如 /user/123）。
- params：动态路由参数（如 { id: '123' }）。
- query：URL 查询参数（如 { name: 'John' }）。
- hash：URL 的 hash 值（如 #section）。
- fullPath：完整的 URL 路径（如 /user/123?name=John#section）。
- name：路由的名称（如果定义了路由的 name 属性）。

示例：

export default {
  mounted() {
    console.log('当前路径:', this.$route.path);
    console.log('路由参数:', this.$route.params);
    console.log('查询参数:', this.$route.query);
    console.log('路由名称:', this.$route.name);
  }
};

2. 通过 `useRoute` 钩子（Vue 3 + Composition API）

作用：在 Vue 3 中使用 Composition API 时，可以通过 useRoute 钩子获取当前路由信息。
使用方法：
- 从 vue-router 中导入 useRoute。
- 在 setup 函数中调用 useRoute。

示例：

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    console.log('当前路径:', route.path);
    console.log('路由参数:', route.params);
    console.log('查询参数:', route.query);
    return {};
  }
};

3. 监听路由变化

作用：在组件中监听路由的变化，以便在路由切换时执行某些操作。
使用方法：
- 使用 watch 监听 this.$route 或 route 对象。

示例：

export default {
  watch: {
    '$route'(to, from) {
      console.log('从', from.path, '跳转到', to.path);
      console.log('新的路由参数:', to.params);
    }
  }
};

或（Vue 3 + Composition API）：

import { watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    watch(
      () => route.path,
      (to, from) => {
        console.log('从', from, '跳转到', to);
      }
    );
    return {};
  }
};

4. 通过路由导航守卫

作用：在全局或组件内守卫中获取路由信息。
使用方法：
- 在 beforeRouteEnter、beforeRouteUpdate 或 beforeRouteLeave 守卫中访问 to 和 from 参数。

示例：

export default {
  beforeRouteEnter(to, from, next) {
    console.log('即将进入的路由:', to.path);
    next();
  },
  beforeRouteUpdate(to, from, next) {
    console.log('路由更新:', to.path);
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log('即将离开的路由:', from.path);
    next();
  }
};

5. 通过 `router.currentRoute` 获取

作用：通过 Vue Router 实例的 currentRoute 属性获取当前路由信息。
使用方法：
- 在组件中通过 this.$router.currentRoute 访问。

示例：

export default {
  mounted() {
    const currentRoute = this.$router.currentRoute;
    console.log('当前路径:', currentRoute.path);
    console.log('路由参数:', currentRoute.params);
  }
};

6. 通过 `route` 对象（Vue 3 + `<script setup>`）

作用：在 Vue 3 的 <script setup> 语法中，可以直接使用 useRoute。

示例：

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
console.log('当前路径:', route.path);
console.log('路由参数:', route.params);
</script>