Vue3怎么配置路由？

Vue3 路由配置详解

在 Vue3 中，路由管理由 Vue Router 4.x 提供支持。以下是详细配置步骤、常见场景、问题及最佳实践。

---

一、安装与基础配置

1. 安装 Vue Router

   npm install vue-router@4
   # 或
   yarn add vue-router@4
   

2. 创建路由实例

   // src/router/index.js
   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(), // 使用 HTML5 History 模式
     routes
   });
   
   export default router;
   

3. 在 Vue 应用中挂载路由

   // main.js
   import {
        
         createApp } from 'vue';
   import App from './App.vue';
   import router from './router';
   
   const app = createApp(App);
   app.