Vue 3 获取路由信三种方法在组件中使用Vue3如何获取当前路由的参数

Vue 3 获取路由信息的三种方法

一、使用 `useRouter` 和 `useRoute` 钩子

Vue 3 的 Composition API 让我们在函数式组件中管理路由变得很简单。下面是使用这两个钩子的步骤：

步骤：

1. 安装 Vue Router。
2. 在组件中使用 `useRouter` 和 `useRoute`。

示例代码：

import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

这样你就可以在函数式组件中访问和操作路由了。

二、通过 `this.$router` 和 `this.$route`

在 Vue 3 中，`this.$router` 和 `this.$route` 仍然可以使用，特别是在传统的选项式 API 中。以下是步骤：

步骤：

1. 在组件中使用 `this.$router` 和 `this.$route`。

示例代码：

export default {
  methods: {
    navigate() {
      this.$router.push('/new-route');
    }
  }
}

这里，`this.$router` 用于导航，而 `this.$route` 用于获取当前路由信息。

三、在模板中使用 `$router` 和 `$route`

在 Vue 模板中，你可以直接使用 `$router` 和 `$route`。这在处理简单的路由操作和数据展示时非常方便。

步骤：

1. 在模板中直接使用 `$router` 和 `$route`。

示例代码：

<template>
  <div>
    <button @click="$router.push('/new-route')">Go to New Route</button>
  </div>
</template>

这种方法适用于简单的场景，但对于复杂的逻辑，最好在脚本部分处理。

对比表格

总结和建议

根据项目复杂度和团队技术栈选择合适的方法，可以使代码更简洁、可维护性更高。对于新项目，建议优先使用 Composition API 和相关钩子。

FAQs

1. Vue3如何获取当前路由路径？

通过访问 `this.$route.path` 或使用 `useRoute().path`。

2. Vue3如何获取当前路由的参数？

通过访问 `this.$route.params` 或使用 `useRoute().params`。

3. Vue3如何监听路由的变化？

使用 `router.beforeEach` 方法注册全局路由守卫。