Vue 3中如何使用Vue Router进行路由管理？

Vue Router 是 Vue.js 官方提供的路由管理工具，它可以帮助我们在 Vue 应用中实现页面的跳转和导航。Vue 3 中，Vue Router 的使用方式与 Vue 2 略有不同，下面就让我们一起来了解一下如何在 Vue 3 中使用 Vue Router 进行路由管理。

安装 Vue Router

首先，我们需要在项目中安装 Vue Router。打开终端，进入项目根目录，执行以下命令：

npm install vue-router@next

安装完成后，在项目目录下会生成一个名为 `node_modules` 的文件夹，其中包含了 Vue Router 的相关代码。

配置路由

接下来，我们需要在项目中创建一个 `router.js` 文件，并在该文件中配置路由。打开 `router.js` 文件，首先引入 Vue 和 Vue Router：

import { createRouter, createWebHistory } from 'vue-router';
import Foo from './components/Foo.vue';
import Bar from './components/Bar.vue';

然后，创建一个路由实例并定义路由规则：

const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
});

在上面的配置中，我们定义了两个路由规则，分别指向 `/foo` 路径和 `/bar` 路径，并分别关联了 `Foo` 组件和 `Bar` 组件。

最后，使用 `export` 导出路由实例：

export default router;

注入路由

完成配置后，我们需要将路由实例注入到 Vue 应用中。在应用的入口文件（通常是 `main.js`）中，引入 `router.js` 并使用 `app.use()` 方法注入路由：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');

这样，Vue Router 就成功地注入到了 Vue 应用中。现在，我们可以在组件中使用路由功能了。

使用路由

在 Vue 3 中，我们可以使用新的 `` 组件来创建页面跳转的链接。在模板中使用 `` 组件，并设置 `to` 属性指定目标路径：

Go to Foo
Go to Bar

需要注意的是，在 Vue 3 中，由于使用了新的 Composition API，我们不能再使用 `$route` 和 `$router` 这些 Vue 2 中的属性和方法。取而代之的是，我们可以使用 `useRoute` 和 `useRouter` 函数来获取当前路由信息和路由实例。

import { useRoute, useRouter } from 'vue-router';
export default {
setup() {
const route = useRoute();
const router = useRouter();
// 打印当前路径
console.log(route.path);
// 跳转到指定路径
router.push('/foo');
return {
route,
router
};
}
};

总结

Vue Router 在 Vue 3 中的使用方式与 Vue 2 略有不同，需要注意的是，在 Vue 3 中我们需要使用 `` 组件来创建链接，并且使用 `useRoute` 和 `useRouter` 函数来获取当前路由信息和路由实例。希望本文能帮助你理解如何在 Vue 3 中使用 Vue Router 进行路由管理。如果你想深入了解更多关于 Vue Router 的内容，可以查阅官方文档。