vue3 使用router

Vue 3 中使用 Vue Router 的步骤如下：

1. 首先，安装 Vue Router。可以通过 npm 或者 yarn 安装，命令如下：

npm install vue-router@4.0.0-rc.1

2. 在你的项目的入口文件（通常是 `main.js`）中，导入 Vue 和 Vue Router，并且使用 Vue.use() 方法注册 Vue Router 插件。示例代码如下：

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 定义你的路由配置
    // { path: '/home', component: Home }
  ]
});

const app = createApp(App);
app.use(router);

app.mount('#app');

3. 在你的项目中创建组件，并且在路由配置中定义这些组件的路由。示例代码如下：

import { defineAsyncComponent } from 'vue';

const Home = defineAsyncComponent(() => import('./components/Home.vue'));
const About = defineAsyncComponent(() => import('./components/About.vue'));

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

export default routes;

4. 在你的根组件中，使用 `<router-view>` 标签来渲染当前路由对应的组件。示例代码如下：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

5. 你可以在组件中使用 `<router-link>` 标签来创建链接到其他路由的导航。示例代码如下：

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

这样，你就可以在 Vue 3 中使用 Vue Router 进行路由管理了。记得根据你的项目需求来定义并配置路由，以及创建相应的组件。