一、为啥要在路由里用 props 传参？

不少刚开始用 Vue Router 的同学，在处理路由传参时总纠结：明明可以直接用 this.$route.params 拿参数，为啥还要搞 props 配置？不同 props 模式有啥区别？实战中怎么选怎么用？这篇就从「为啥用」「怎么用」「啥场景用」「避坑点」几个角度，把 Vue Router 里的 props 讲明白。

先想个场景：做个商品详情页，组件里写 this.$route.params.id 拿商品 ID，后来产品说要加个「相似商品」模块，想复用这个详情组件展示相似商品——但相似商品的 ID 不是从路由来的，是接口返回的，这时候麻烦了：组件里硬绑了 $route，复用就得改组件代码，甚至重写逻辑。

这就是「组件和路由强耦合」的问题，而用 props 传参，能彻底解决这个痛点：

• 解耦路由与组件：组件不再直接依赖 $route，只关心自己接收的 props，路由负责把参数「映射」给 props，组件管自己用 props 渲染，双方互不干涉。
• 提高复用性：还是上面的例子，相似商品模块要展示时，只要给组件传对应的 ID 到 props，组件逻辑完全不用改。
• 方便测试：测试组件时，直接传模拟数据给 props 就行，不用费劲模拟整个路由对象。

举个反例更直观：

<!-- 不推荐写法：组件强依赖 $route -->
<template>{{ $route.params.id }}</template>
<script>
export default {
  mounted() {
    // 所有逻辑都绑死在路由参数上
    fetch(`/api/product/${this.$route.params.id}`);
  }
}
</script>
<!-- 推荐写法：用 props 解耦 -->
<template>{{ id }}</template>
<script>
export default {
  props: ['id'],
  mounted() {
    // 只关心 props 里的 id，谁传的不管
    fetch(`/api/product/${this.id}`);
  }
}
</script>

路由配置里只要把 params.id 映射给 props.id，组件就能无痛复用。

Vue Router 里 props 有哪几种配置方式？

Vue Router 给 props 设计了布尔、对象、函数三种模式，分别对应「简单映射」「静态传值」「灵活处理」三种场景。

（一）布尔模式：路由参数直接映射给 props

当 props: true 时，路由的动态段参数（params）会自动传给组件的 props，且参数名和 props 名称必须一致。

例子：商品详情页路由

// 路由配置
const routes = [
  {
    path: '/product/:id', // 动态段 :id
    component: ProductDetail,
    props: true // 开启布尔模式
  }
]
// 组件
<template><div>商品ID：{{ id }}</div></template>
<script>
export default {
  props: ['id'] // 和路由动态段名称一致
}
</script>

访问 /product/123 时，props.id 会被赋值为 '123'（注意是字符串，需要转数字得自己处理）。

适用场景：路由只有一个动态参数，且参数名和组件 props 名称完全一致的简单场景（比如文章详情、用户详情）。

（二）对象模式：传静态/自定义值

当 props 是对象时，对象里的键值对会作为静态属性传给组件，不管路由怎么变，这些值都不会变。

例子：用户默认信息配置

// 路由配置
const routes = [
  {
    path: '/user',
    component: UserInfo,
    props: { 
      role: 'visitor', // 静态角色：访客
      defaultName: '匿名用户' // 静态默认昵称
    }
  }
]
// 组件
<template>
  <div>
    角色：{{ role }}<br>
    昵称：{{ defaultName }}
  </div>
</template>
<script>
export default {
  props: ['role', 'defaultName']
}
</script>

不管用户是否登录、路由怎么跳转，role 和 defaultName 始终是配置里的静态值。

注意：对象模式下，路由的动态段参数不会自动传入，所以它适合传「不随路由变化的固定配置」，比如页面权限标识、默认占位文案。

（三）函数模式：灵活处理路由参数

当 props 是函数时，Vue Router 会把当前路由对象（route）传给函数，函数返回的对象就是要传给组件的 props，这种模式能灵活处理 params、query，甚至做参数转换、组合逻辑。

场景1：结合 params 和 query 传参

// 路由配置：文章页，支持 tab 切换（query 参数）
const routes = [
  {
    path: '/article/:articleId',
    component: Article,
    props: (route) => {
      return {
        articleId: route.params.articleId, // 取动态段参数
        tab: route.query.tab || 'content' // 取 query，无则设默认值
      }
    }
  }
]
// 组件
<template>
  <div>
    文章ID：{{ articleId }}<br>
    当前 tab：{{ tab }}
  </div>
</template>
<script>
export default {
  props: ['articleId', 'tab']
}
</script>

访问 /article/456?tab=comment 时，props.tab 是 'comment'；访问 /article/456 时，tab 自动变成 'content'。

场景2：参数转换与逻辑处理

// 路由配置：帖子详情，postId 转数字，判断是否为 premium
const routes = [
  {
    path: '/post/:postId',
    component: PostDetail,
    props: (route) => {
      const postId = parseInt(route.params.postId, 10); // 字符串转数字
      return { 
        postId, 
        isPremium: postId > 100 // 根据 postId 生成新属性
      };
    }
  }
]
// 组件：直接用处理好的 props
<template>
  <div>
    帖子ID：{{ postId }}<br>
    是否精品：{{ isPremium ? '是' : '否' }}
  </div>
</template>
<script>
export default {
  props: {
    postId: Number,
    isPremium: Boolean
  }
}
</script>

函数模式的核心优势是对路由参数的「加工能力」——不管是类型转换、默认值设置，还是多参数组合，都能在路由层处理完，再把干净的数据给组件。

不同 props 配置方式适合啥场景？

光知道用法还不够，得结合实际项目场景选模式，才能发挥最大价值。

布尔模式：简单动态参数场景

适合「路由只有一个动态段，且参数名和组件 props 名完全一致」的场景。

• 商品详情页（/product/:id）
• 用户个人主页（/user/:userId）
• 文章详情页（/article/:articleId）

这些页面的核心逻辑只依赖一个动态参数，用布尔模式能最快实现「路由参数 → props」的映射，代码最少。

对象模式：静态配置场景

适合需要给组件传「固定不变」的配置项，

• 页面默认权限（如后台管理页的默认角色 role: 'editor'）
• 国际化文案（如多语言页面的默认提示 tip: '请登录'）
• 功能开关（如某些页面默认关闭评论 commentEnabled: false）

这些值不会随路由变化而变化，用对象模式把配置「写死」在路由里，组件只管接收，不用关心来源。

函数模式：复杂参数处理场景

适合需要「对路由参数做加工」的场景，

• 参数类型转换：路由参数是字符串，组件需要数字（如帖子 ID 转 Number）。
• 结合 query 参数：列表页的分页（page）、筛选（filter）参数需要和动态段结合。
• 生成衍生属性：根据路由参数判断页面状态（如是否为 VIP 内容、是否显示广告）。

举个电商项目的例子：
商品列表页需要根据路由 /list/:category?page=1&sort=price 传参，用函数模式可以：

props: (route) => {
  return {
    category: route.params.category || 'all', // 动态段默认值
    page: parseInt(route.query.page, 10) || 1, // query 转数字+默认值
    sort: route.query.sort || 'default' // query 默认值
  }
}

组件里拿到的 category、page、sort 都是处理好的，不用自己再写转换逻辑，代码更简洁。

props 传参和直接用 $route 有啥区别？

很多同学会疑惑：既然 $route 能直接拿参数，为啥还要绕一圈用 props？核心区别在于「组件与路由的耦合度」。

对比维度	props 传参	直接用 $route
耦合度	低（组件只关心 props）	高（组件依赖路由结构）
复用性	高（换场景只需改路由配置）	低（换场景要改组件代码）
测试成本	低（直接传模拟数据给 props）	高（需模拟整个路由对象）
参数处理	路由层处理（如类型转换、默认值）	组件层处理（代码冗余）

举个复用场景的例子：
做一个「评论组件」，需要在「文章详情页」和「商品详情页」复用。

• 用 $route 的写法：组件里得写 this.$route.params.articleId 或 this.$route.params.goodsId，换页面就得改组件。
• 用 props 的写法：路由配置里，文章页传 articleId 给 props.resourceId，商品页传 goodsId 给 props.resourceId，评论组件只需要 props.resourceId，完全不用改。

这就是解耦的威力——路由负责「数据映射」，组件负责「数据消费」，分工明确，维护成本直线下降。

实战中怎么结合路由守卫处理 props 数据？

路由守卫（如 beforeEnter、beforeEach）能在进入路由前做权限验证、数据预加载等操作，结合 props，可以把「预处理后的数据」传给组件，减少组件里的重复逻辑。

场景：进入订单详情页前，预加载订单数据

订单详情页需要先拉取订单信息，再渲染页面，如果把请求逻辑放组件里，每个用订单组件的地方都得写一遍；用路由守卫+props 可以统一处理：

// 路由配置
const routes = [
  {
    path: '/order/:orderId',
    component: OrderDetail,
    // 函数模式：从 route.meta 拿预加载数据
    props: (route) => ({ 
      orderId: route.params.orderId, 
      preloadData: route.meta.preloadData 
    }),
    // 路由独享守卫：进入前预加载数据
    beforeEnter: async (to, from, next) => {
      const orderId = to.params.orderId;
      // 模拟接口请求
      const data = await fetch(`/api/order/${orderId}`);
      // 把数据存在 route.meta 里
      to.meta.preloadData = data;
      next(); // 继续导航
    }
  }
]
// 组件：直接用 props 里的预加载数据
<template>
  <div>
    订单号：{{ orderId }}<br>
    订单金额：{{ preloadData.amount }}
  </div>
</template>
<script>
export default {
  props: ['orderId', 'preloadData']
}
</script>

这样组件里完全不用写请求逻辑，路由守卫负责预加载，props 负责传数据，代码更简洁，也避免了组件重复写请求逻辑。

扩展：全局守卫结合 props

如果多个路由都需要用户权限信息，可以用全局守卫 beforeEach 处理，再通过 props 传给组件：

// 全局守卫：验证用户权限
router.beforeEach(async (to, from, next) => {
  const user = await checkUserAuth(); // 验证权限
  to.meta.userRole = user.role; // 把权限存到 meta
  next();
});
// 路由配置：用函数模式取 meta 里的权限
const routes = [
  {
    path: '/admin',
    component: AdminPanel,
    props: (route) => ({ 
      role: route.meta.userRole 
    })
  }
]
// 组件：接收权限 props
<template>
  <div v-if="role === 'admin'">管理员面板</div>
  <div v-else>无权限</div>
</template>
<script>
export default {
  props: ['role']
}
</script>

全局守卫统一处理权限，路由 props 负责分发，组件只关心权限展示，实现了「权限逻辑」和「组件渲染」的解耦。

用 props 传参时要注意哪些坑？

虽然 props 好用，但不注意细节也会踩坑，总结几个常见问题：

布尔模式：只传 params，不传 query

布尔模式下，props 只会把路由动态段（params）传给组件，query 参数不会自动传入，如果需要 query，必须用函数模式手动处理：

// 错误：布尔模式拿不到 query
props: true, 
// 正确：函数模式手动传 query
props: (route) => ({ 
  id: route.params.id, 
  tab: route.query.tab 
})

对象模式：值是静态的，不会随路由变化

对象模式里的属性是「写死」的，哪怕路由参数变了，对象里的值也不会变。

// 路由配置：对象模式传 theme
props: { theme: 'light' }
// 后来需求变了，想根据用户设置改 theme，但对象模式改不了
// 必须换成函数模式：
props: (route) => ({ 
  theme: route.meta.theme || 'light' 
})

函数模式：注意 this 指向

函数模式里，如果用箭头函数，this 不会指向路由实例；如果用普通函数，this 是路由实例，如果需要访问路由实例的方法/属性，得用普通函数：

// 箭头函数：this 不是路由实例
props: (route) => ({ ... }) 
// 普通函数：this 是路由实例
props: function(route) { 
  console.log(this.app); // 可以访问路由实例的 app 属性
  return { ... }; 
}

组件 props 要定义类型和默认值

路由传参给 props 后，组件里要明确 props 的类型、默认值，避免类型错误，比如路由传的是数字，但组件没定义类型，可能当成字符串处理：

// 路由里 postId 是数字（函数模式转换后）
props: (route) => ({ postId: parseInt(route.params.postId, 10) })
//