路由管理（Vue Router 4 完整用法）

Vue Router 4 是 Vue 3 官方推荐的路由管理工具。以下记录常用用法，涵盖基本配置、动态路由、嵌套路由、守卫等功能点。

---

一、安装与基本配置

npm install vue-router@4

创建 router/index.js：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在 main.js 中引入：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

---

二、基础使用

在组件中跳转：

<router-link to="/">首页</router-link>
<router-link :to="{ name: 'About' }">关于</router-link>

使用代码跳转：

import { useRouter } from 'vue-router'

const router = useRouter()
router.push('/about')

---

三、嵌套路由

配置嵌套结构：

const routes = [
  {
    path: '/parent',
    component: ParentView,
    children: [
      {
        path: 'child',
        component: ChildView
      }
    ]
  }
]

组件内使用 <router-view /> 作为子路由出口。

---

四、动态路由与参数

带参数路由：

{ path: '/user/:id', component: UserView }

获取参数：

import { useRoute } from 'vue-router'

const route = useRoute()
console.log(route.params.id)

支持 props 模式：

{ path: '/user/:id', component: UserView, props: true }

---

五、路由守卫

全局前置守卫：

router.beforeEach((to, from, next) => {
  if (to.meta.auth && !isLogin()) {
    next('/login')
  } else {
    next()
  }
})

组件内守卫（仅适用于传统 Options API）：

beforeRouteEnter(to, from, next) {
  next(vm => {
    // 访问组件实例
  })
}

---

六、懒加载路由

推荐路由组件使用异步加载方式：

const routes = [
  {
    path: '/about',
    component: () => import('@/views/About.vue')
  }
]

提升初始加载速度。

---

七、重定向与通配符

{ path: '/home', redirect: '/' }
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }

---

八、命名视图

{
  path: '/multi',
  components: {
    default: DefaultView,
    sidebar: SidebarView
  }
}

模板中：

<router-view />
<router-view name="sidebar" />

---

九、小结

Vue Router 4 用法灵活，支持嵌套、守卫、动态参数、命名视图、懒加载等场景。配置清晰，推荐集中放在 router 目录统一管理。