Vue3 路由管理实战怎么做？基础配置与性能优化技巧有哪些？

npm install vue-router@4

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/equipment',
      name: 'Equipment',
      component: () => import('@v/Equipment.vue')
    },
    // 其他路由配置...
  ]
})

export default router

component: () => import(/ webpackChunkName: "equipment" / '@/views/Equipment.vue')

scrollBehavior(to, from, savedPosition) {
  return savedPosition || { top: 0, behavior: 'smooth' }
}

const MAX_PREFETCH = 3
router.beforeEach(async (to, from) => {
  prefetchRoutes(to.matched, MAX_PREFETCH)
})

function generateRoutes(userRole) {
  return baseRoutes.filter(route => 
    route.meta.roles.includes(userRole)
  )
}

<router-view v-slot="{ Component }">
  <transition :name="getTransitionName()">
    <component :is="Component" />
  </transition>
</router-view>

// vite.config.js
export default defineConfig({
  build: {
    target: 'esnext',
    polyfillModulePreload: false
  }
})