Vue3 是当前最流行的前端框架之一，它提供了许多方便的功能和工具，其中路由（Router）就是其中之一。本文将介绍如何在 Vue3 中使用路由。
- 安装和使用 Vue Router
首先，我们需要安装 Vue Router。在终端中输入以下命令：
npm install vue-router@next --save接下来，我们需要创建一个路由实例。在 src/router 目录下创建一个 index.js 文件，并添加以下代码：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router这里我们创建了两个组件：Home 和 About，并为它们分别指定了路径。当用户访问这些路径时，相应的组件将被渲染。
- 使用
<router-link>组件生成链接
我们可以使用 <router-link> 组件来生成链接。这个组件接受一个 to 属性，该属性指定了要导航到的路径。例如，我们可以这样生成指向主页的链接：
<router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>当我们点击这些链接时，页面将自动跳转到相应的路径。注意，我们使用了管道符 | 来分隔两个链接。
- 使用
<router-view>组件渲染页面内容
最后，我们还需要使用 <router-view> 组件来渲染页面的内容。这个组件会根据当前的路径自动显示对应的组件。例如：
<router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
<router-view></router-view>当我们访问主页时，会显示 Home 组件的内容；当我们访问关于页面时，会显示 About 组件的内容。如果用户尝试访问不存在的路径，则不会显示任何内容。
- 动态路由匹配和参数传递
除了静态路由之外，我们还可以使用动态路由来匹配路径。动态路由使用冒号 : 来表示参数。例如，我们可以这样定义一个动态路由：
const routes = [
{ path: '/user/:id', component: User } // id 是一个参数，可以匹配任意值
]当我们访问类似于 /user/123 这样的路径时，User 组件将会被渲染，并且 id 参数的值会被传递给 User 组件。在 User 组件中，我们可以使用 $route.params 来获取这个参数的值。例如：
<template>
<div>User ID: {{ $route.params.id }}</div> // 输出：User ID: 123
</template>