考察点分析

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

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

具体技术评估点：

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

技术解析

关键知识点

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

原理剖析

在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监听）

常见误区

  1. 混淆params与path的匹配关系
  2. 误以为Query参数需要路由预定义
  3. 未处理参数类型转换（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 // 查询参数

适用场景：

  • 路径参数：标识资源层级（如商品分类/ID）
  • 查询参数：控制页面状态（如分页、排序、过滤条件）

解决方案

编码示例 

  // 路由配置
{
  path: '/search/:keyword',
  component: SearchResults,
  props: route => ({
    keyword: decodeURIComponent(route.params.keyword), // 处理特殊字符
    page: Number(route.query.page) || 1 // 类型转换
  })
}

// 组件接收
export default {
  props: ['keyword', 'page'],
  watch: {
    '$route.query.page'(newPage) {
      // 处理分页变化
    }
  }
}

优化建议：

  1. 类型转换：URL参数始终为字符串，需手动转换数字/布尔类型
  2. 解码处理：使用decodeURIComponent处理特殊字符
  3. 性能优化：对高频变化的查询参数使用防抖监听

可扩展性建议

  • 大数据场景：对URL参数进行长度限制（浏览器限制约2000字符）
  • SEO优化：关键参数优先使用路径参数（搜索引擎权重更高）
  • 移动端适配：复杂查询参数建议使用POST请求

深度追问

  1. 如何实现路由参数的验证？ 答：通过路由配置的props函数进行类型校验

  2. 路由参数变化时如何避免组件重新挂载？ 答：使用watch监听参数变化，配合<router-view :key="$route.path">

  3. 如何序列化对象参数？ 答：复杂对象使用JSON序列化：JSON.stringify(obj)，配合URL编码处理

Edit this page

Last updated 06 Mar 2025, 13:07 +0800 . history