当前位置：首页 > news >正文

学习笔记：Vue Router 动态路由与参数匹配详解

news 2025/10/11 8:25:35

题目重述

本文主要讲解 Vue Router 中的带参数的动态路由匹配机制，包括：

动态参数的定义与使用（如 /users/:id）
多参数和自定义正则表达式的高级用法
组件如何响应路由参数的变化
404 路由捕获与通配符配置
参数变化监听方式（组合式 API 和选项式 API）

详解

一、动态路由参数的基本语法

在 Vue Router 中，可以通过在路径中使用冒号 : 来定义动态段（参数）：

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

匹配示例：
/users/johnny → $route.params.id = 'johnny'
/users/jolyne → $route.params.id = 'jolyne'

✅ 特点：

所有符合该模式的 URL 都会映射到同一个组件。
参数值通过 $route.params 访问。

二、多参数路由匹配

可以在一个路径中定义多个动态参数：

{ path: '/users/:username/posts/:postId', component: PostDetail }

匹配路径	route.params
`/users/eduardo/posts/123`	`{ username: 'eduardo', postId: '123' }`

注意：每个 :参数名 对应一个字段，并自动填充到 route.params 对象中。

三、对参数变化做出反应

由于从 /users/a 到 /users/b 是同一组件复用，组件不会重新创建，因此：

❌ 生命周期钩子（如 created、mounted）不会再次触发

✅ 正确做法是监听 $route 变化：

方法一：使用 `watch` 监听参数变化（组合式 API）

<script setup>
import { watch } from 'vue'
import { useRoute } from 'vue-router'const route = useRoute()watch(() => route.params.id,(newId, oldId) => {console.log('用户ID已变更:', newId)// 执行数据加载等操作}
)
</script>

方法二：使用导航守卫 `onBeforeRouteUpdate`

<script setup>
import { onBeforeRouteUpdate } from 'vue-router'onBeforeRouteUpdate(async (to, from) => {userData.value = await fetchUser(to.params.id)
})
</script>

💡 优势：可在守卫中异步获取数据或阻止无效跳转。

四、捕获所有路由（404 处理）

为了处理不存在的页面，可以使用通配符路由：

1. 捕获任意路径

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

(.*)* 表示匹配任意字符（包括多级路径）
匹配结果存于 route.params.pathMatch

示例：
/not/exist/path → route.params.pathMatch = ['not', 'exist', 'path']
或字符串形式："not/exist/path"

2. 自定义正则表达式参数

{path: '/user-:afterUser(.*)',component: UserGeneric
}

匹配：/user-john, /user-admin-settings 等

五、编程式导航传参（保留结构）

当需要跳转到通配符路由并保持路径结构时：

router.push({name: 'NotFound',params: { pathMatch: route.path.substring(1).split('/') },query: route.query,hash: route.hash
})

⚠️ 注意：substring(1) 避免生成 // 开头的 URL

六、服务器配置提示（History 模式）

若使用 createWebHistory 模式（无 #），必须确保后端服务器将所有前端路由请求指向 index.html，否则刷新会导致 404。

常见配置：

Nginx: 添加 try_files $uri $uri/ /index.html;
Node.js (Express): 使用中间件 fallback 到 index.html

图表示意：动态路由匹配逻辑流程图

总结要点

功能	实现方式	注意事项
动态参数	`/users/:id`	参数通过 `$route.params.id` 获取
多参数	`/a/:x/b/:y`	自动生成对应字段对象
参数监听	`watch(route.params)` 或 `onBeforeRouteUpdate`	生命周期钩子不触发！
通配符路由	`/:pathMatch(.)`	用于 404 页面
编程式导航传参	`params: { pathMatch: [...] }`	防止双斜杠问题
History 模式	`createWebHistory()`	需服务器支持