vue3 路由使用实例

好的，以下是一个简单的 Vue 3 路由使用示例：

1. 首先，需要在项目中安装 Vue Router：

npm install vue-router@next

2. 在 main.js 中导入并使用 Vue Router：

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

const app = createApp(App)
app.use(router)
app.mount('#app')

3. 创建路由实例并配置路由：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

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

export default router

在上面的示例中，我们定义了两个路由，分别是 `/` 和 `/about`，并且分别对应两个组件 `Home` 和 `About`。

4. 在组件中使用路由：

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">About</router-link>
  </div>
</template>

在上面的示例中，我们使用了 `router-link` 组件来实现路由跳转。

当用户点击 `router-link` 组件时，会自动跳转到 `/about` 路由对应的组件。同时，浏览器的地址栏也会相应地更新。

这就是一个简单的 Vue 3 路由使用示例。希望能帮到你！