第五章：动态路由¶

动态路由匹配¶

基本用法¶

const routes = [
  { path: '/user/:id', component: User }
]

获取参数¶

<template>
  <div>
    用户 ID: {{ route.params.id }}
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
</script>

多个参数¶

const routes = [
  { path: '/user/:id/post/:postId', component: UserPost }
]

// 获取参数
const route = useRoute()
console.log(route.params.id)      // 用户 ID
console.log(route.params.postId)  // 文章 ID

可选参数¶

const routes = [
  { path: '/user/:id?', component: User }  // ? 表示可选
]

正则匹配¶

const routes = [
  // 只匹配数字
  { path: '/user/:id(\\d+)', component: User },

  // 匹配所有
  { path: '/:pathMatch(.*)*', component: NotFound }
]

动态添加路由¶

添加路由¶

const router = createRouter({ ... })

// 添加路由
router.addRoute({
  path: '/admin',
  component: Admin
})

// 添加嵌套路由
router.addRoute('admin', {
  path: 'users',
  component: AdminUsers
})

删除路由¶

// 通过名称删除
router.removeRoute('admin')

// 通过 addRoute 返回的函数删除
const removeRoute = router.addRoute({ ... })
removeRoute()

小结¶

动态路由要点：

基本用法：:id 参数
获取参数：route.params
多个参数：多个 :param
可选参数：:id?
正则匹配：(\d+)
动态添加：addRoute、removeRoute

下一章我们将学习导航守卫。