路由参数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 // 查询参数

适用场景：

模板中$event对象的使用规范

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

考察点分析

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

Vue事件机制理解：区分原生DOM事件与自定义事件的处理差异
模板语法规范：掌握事件参数传递的正确写法及参数顺序
事件代理原理：理解Vue事件系统的抽象层实现机制

具体技术评估点：

原生事件中$event的自动注入机制
自定义事件中$event的语义变化
多参数传递时的模板语法规范
事件代理在组件化中的实现原理

技术解析

关键知识点优先级

事件类型区分 > 参数传递规范 > 事件代理机制

原理剖析

原生DOM事件（如@click）：

Vue自动注入原生Event对象作为第一个参数
使用方法无需显式声明即可访问$event

 // 自动获取事件对象
<button @click="handleClick"></button>

methods: {
 handleClick(e) { // 自动注入原生Event对象
 console.log(e.target)
 }
}

自定义事件（组件通信）：

$event对应组件$emit的payload
需要显式传递事件对象

 // 子组件
this.$emit('custom', { data: 1 })

// 父组件
<Child @custom="handleCustom($event, 'param')" />

methods: {
 handleCustom(payload, param) {
 console.log(payload.data) // 1
 }
}

常见误区

误以为自定义事件自动携带原生Event对象
多参数传递时参数顺序混乱
混淆methods参数与模板参数的对应关系

问题解答

本质区别：

参数传递 on ZiYang FrontEnd Interview

路由参数params与query的获取

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

常见误区 link

问题解答 link

模板中$event对象的使用规范

考察点分析 link

技术解析 link

关键知识点优先级 link

原理剖析 link

常见误区 link

问题解答 link

考察点分析

技术解析

关键知识点

原理剖析

常见误区

问题解答

考察点分析

技术解析

关键知识点优先级

原理剖析

常见误区

问题解答