路由参数params与query的获取

Tue, 04 Mar 2025 07:00:27 +0000

考察点分析

本题主要考察以下核心能力维度：

路由机制理解：动态路由配置与参数解析能力
API熟练度：Vue Router核心对象$route的正确使用
场景设计能力：不同参数类型的适用场景判断

具体技术评估点：

动态路由的:param语法配置
查询字符串自动解析机制
$route.params与$route.query的取值差异
路由参数与查询参数在URL结构中的表现差异
参数类型对浏览器历史记录的影响

技术解析

关键知识点

动态路由配置 > 查询字符串解析 > 参数类型语义

原理剖析

在Vue Router中：

路径参数(Params)：通过路由配置的path: '/user/:id'定义，:id为参数占位符。当访问/user/123时，$route.params将包含{ id: '123' }
查询参数(Query)：通过URL的?后的键值对传递（如?page=2），自动解析到$route.query，无需预先配置

两者关键差异：

URL结构：Params是路径的一部分，Query是可选附加参数
路由匹配：Params影响路由匹配，Query不影响
历史记录：Params变化会触发组件重建，Query变化默认不会（可通过watch监听）

常见误区

混淆params与path的匹配关系
误以为Query参数需要路由预定义
未处理参数类型转换（URL参数始终为字符串）

问题解答

在Vue Router中：

路径参数通过$route.params获取，需在路由配置中用:声明（如path: '/user/:id'）
查询参数通过$route.query获取，自动解析URL问号后的键值对

编码示例：

 // 路由配置
const routes = [
 { path: '/product/:category/:id', component: ProductDetail }
]

// 组件内获取
const category = this.$route.params.category // 路径参数
const page = this.$route.query.page // 查询参数

适用场景：

React Router原理与配置

Wed, 05 Mar 2025 12:28:17 +0000

考察点分析

核心能力维度：前端路由实现原理、React Router应用能力、SPA架构理解

技术评估点：

对hash路由与history路由底层实现差异的理解
动态路由配置能力及参数获取方式
React Router Hooks的运用熟练度
客户端路由与服务器路由的协同处理
路由守卫与路径匹配规则掌握程度

技术解析

关键知识点

History API工作流 > Hash路由实现机制 > 动态路由匹配规则
React Router组件树结构 > 路由参数传递机制 > Hooks执行上下文

原理剖析

BrowserRouter：

基于HTML5 History API（pushState/replaceState）
通过popstate事件监听URL变化
需要服务器配置支持（所有路由指向index.html）

HashRouter：

依赖window.location.hash
使用hashchange事件监听变化
兼容性更好但URL不够优雅

动态路由：

 // React Router v6
<Route path="/user/:id" element={<UserPage />} />

// 组件内获取参数
const { id } = useParams();

useParams：

从当前URL提取动态参数的Hook
返回键值对对象
仅在路由上下文内可用

常见误区

混淆pushState与HTTP请求的关系（不会触发页面刷新）
动态路由未配置服务器导致直接访问404
在class组件中错误使用Hooks
路径匹配时忽略大小写敏感配置

问题解答

路由类型区别：

URL解析 on ZiYang FrontEnd Interview

路由参数params与query的获取

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

常见误区 link

问题解答 link

React Router原理与配置

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

常见误区 link

问题解答 link

考察点分析

技术解析

关键知识点

原理剖析

常见误区

问题解答

考察点分析

技术解析

关键知识点

原理剖析

常见误区

问题解答