Vue Router 路由组件 Props 传参机制详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00791/article/details/148375251

Vue Router 路由组件 Props 传参机制详解

vue-router 🚦 The official router for Vue 2 项目地址: https://gitcode.com/gh_mirrors/vu/vue-router

为什么需要 Props 传参

在 Vue Router 的使用中，我们经常需要在路由组件中获取路由参数。初学者通常会直接在组件中使用 $route 对象来访问这些参数：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

这种方式虽然简单直接，但会带来几个问题：

组件与路由强耦合：组件必须依赖特定的路由结构才能正常工作
可重用性差：组件无法在其他不匹配的路由中使用
测试困难：测试组件时需要模拟整个路由环境

Props 传参的三种模式

Vue Router 提供了三种方式向路由组件传递 props，让我们可以优雅地解耦组件和路由。

1. Boolean 模式（布尔值模式）

当设置为 true 时，route.params 会自动设置为组件的 props。

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true }
  ]
})

// 组件定义
const User = {
  props: ['id'],  // 这里接收路由参数 id
  template: '<div>User {{ id }}</div>'
}

特点：

自动将路由参数映射为组件 props
适用于简单的参数传递场景
保持组件与路由的解耦

2. Object 模式（对象模式）

当 props 是一个对象时，它会原样设置为组件 props。适用于传递静态值。

const router = new VueRouter({
  routes: [
    { 
      path: '/promotion/from-newsletter', 
      component: Promotion, 
      props: { newsletterPopup: false } 
    }
  ]
})

// 组件定义
const Promotion = {
  props: ['newsletterPopup'],
  template: '<div v-if="newsletterPopup">显示弹窗</div>'
}

适用场景：

需要传递固定不变的配置参数
不需要依赖路由参数的静态数据传递

3. Function 模式（函数模式）

通过函数可以创建返回 props 的函数，实现高度自定义的参数传递逻辑。

const router = new VueRouter({
  routes: [
    { 
      path: '/search', 
      component: SearchUser, 
      props: (route) => ({ query: route.query.q }) 
    }
  ]
})

// 组件定义
const SearchUser = {
  props: ['query'],
  template: '<div>搜索关键词: {{ query }}</div>'
}

高级用法：

参数类型转换：可以将字符串参数转换为数字等
参数组合：可以组合多个路由参数
默认值处理：可以为缺失的参数提供默认值

注意事项：

函数应该是无状态的（纯函数）
只在路由变化时执行
如需状态管理，应该使用包装组件

命名视图下的 Props 传递

对于具有多个命名视图的路由，需要为每个命名视图单独配置 props：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      components: { 
        default: User,
        sidebar: Sidebar
      },
      props: { 
        default: true,  // 为默认视图启用布尔模式
        sidebar: false  // 为侧边栏禁用 props 传递
      }
    }
  ]
})