vue3 路由怎么使用

在 Vue3 中，路由通常通过 Vue Router 这个官方提供的库来管理组件间的导航。以下是基本的步骤：

1. 安装 Vue Router：

   npm install @vue/router

2. 引入并配置 router.js 文件：

   import { createRouter, createWebHistory } from 'vue-router'
   import Home from '@/views/Home.vue'
   // 其他视图...
   
   const routes = [
     { path: '/', name: 'Home', component: Home },
     // 更多路由配置...
   ]
   
   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL), // 使用浏览器历史 API 或 hash 部署模式
     routes,
   })
   
   export default router

3. 在 main.js 中引入并挂载路由器：

   import router from './router'

   new Vue({
     app: document.getElementById('app'),
     router,
     render: h => h(App),
   }).$mount('#app')

4. 在模板中使用 `<router-view>` 标签，它会动态渲染匹配当前路由的组件：

   <div id="app">
     <router-view></router-view>
     <!-- 可选的导航栏、面包屑等全局导航 -->
   </div>

5. 路由守卫（如 beforeEach、 afterEach 等）可以用于控制路由的权限、验证等额外操作。