vue3中userouter怎么使用

Vue Router是Vue.js官方推荐的路由库，用于在单页面应用（SPA）中管理路由和导航。在Vue 3中使用Vue Router，你需要遵循以下步骤：

1. 安装依赖：首先安装`vue-router`，可以使用npm或yarn：

   npm install vue-router
   # 或者
   yarn add vue-router

2. 引入库：在你的项目中，通常在`main.js`或`App.vue`文件里引入Vue Router：

   import { createRouter, createWebHistory } from 'vue-router';
   // 如果是服务器渲染，可能需要使用HashRouter或BrowserRouter
   import { BrowserRouter as Router, Route, Link } from 'vue-router';

3. 创建路由器实例：定义路由配置数组，然后创建一个路由器实例：

   const routes = [
     {
       path: '/',
       name: 'Home',
       component: HomeView,
     },
     // ... 更多路由配置
   ];

   const router = createRouter({
     history: createWebHistory(), // 对于浏览器环境
     // 或者
     // mode: 'history', // 使用hash模式，对于旧的浏览器不兼容
     routes
   });

4. 配置路由守卫：可选地，你可以使用`beforeEach`、`async beforeEach`等守卫来控制路由的导航流程，如权限检查、状态管理等。

5. 在组件中使用路由：在组件模板中使用`<router-view>`来显示当前激活的路由组件，`<router-link>`用来导航到其他路由：

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

6. 注册和使用：最后，将路由实例挂载到Vue实例上：

   Vue.createApp(App).use(Router).mount('#app');