vue 3 如何使用路由

Vue 3 中使用路由需要先安装 Vue Router。您可以使用以下命令进行安装：

npm install vue-router@4.0.0-beta.6

安装完成后，在您的 Vue 3 项目中，您可以创建一个路由实例并配置路由规则。以下是一个简单的例子：

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue'),
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

在这个例子中，我们使用 `createRouter` 函数创建了一个路由实例，并且通过 `routes` 配置了两个路由规则。其中，`path` 表示路由路径，`name` 表示路由名称，`component` 表示路由对应的组件。

完成配置后，您需要在 Vue 3 应用中使用 `router` 实例。以下是一个简单的例子：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

在这个例子中，我们使用 `app.use` 方法将路由实例挂载到 Vue 3 应用中。

完成以上步骤后，您就可以在 Vue 3 应用中使用路由了。例如，您可以在模板中使用 `<router-link>` 组件来生成路由链接，也可以使用 `router.push` 方法在 JavaScript 中编程式导航。