路由组件传参

路由组件传参是指将参数直接以 props 的形式传递给组件。

快速上手

回顾如何获取路由参数。假设有如下的动态路由：

const routes = [
  { 
    path: '/users/:userId(\\d+)',
    component: User
  },
]

之后诸如 /users/1 就会匹配上该路由，其中 1 就是对应的参数。那么在组件中如何获取这个参数呢？

1. 要么用 $route.params

2. 要么就是 useRoute( ) 方法获取到当前的路由

这些方式和路由是紧密耦合的，这限制了组件的灵活性，因为它只能用于特定的 URL.

<template>
	<!-- 在视图中接收路由参数 -->
	<div>
        $route.params.userId
    </div>
</template>

<Script setup>
    //在js中接收
	const route= useRoute();
    console.log(route.params.id)
</Script>

一种更好的方式，是将参数设置为组件的一个 props，这样能删除组件对 $route 的直接依赖。

1. 首先在路由配置中开启 props

   const routes = [
     { 
         path: '/user/:userId(\\d+)',
         name: 'User', 
         component: User, 
         //开启路由的props
         props: true }
   ]

2. 在组件内部设置 id 这个 props，之后路由参数就会以 props 的形式传递进来

   <script setup>
       //使用props可以接收到路由的参数
   	const props = defineProps({
             userId: {
               type: String,
               required: true
             }
   	})
   </script>

相关细节

路由参数设置成组件 props，支持不同的模式：

1. 布尔模式
2. 对象模式
3. 函数模式

1. 布尔模式

当 props 设置为 true 时，route.params 将被设置为组件的 props。

如果是命名视图，那么需要为每个命名视图定义 props 配置：

const routes = [
  {
    path: '/user/:id',
    components: { default: User, sidebar: Sidebar },
    props: { default: true, sidebar: false }
  }
]

2. 对象模式

当 props 设置为一个对象时候，回头传递到组件内部 props 的信息就是这个对象。

const routes = [
   {
    path: '/promotion',
    name: 'Promotion',
    component: Promotion,
    //props为对象的形式
    props: {
      newsletter: true
    }
  },
]

<script setup>
//接收路由的props参数
const props = defineProps({
  newsletter: {
    type: Boolean,
    required: true
  }
})
console.log(props.newsletter)
</script>

3. 函数模式

可以创建一个返回 props 的函数。这允许你将参数转换为其他类型，将静态值与基于路由的值相结合。

const routes = [
  {
    path: '/search',
    component: Search,
     //以函数的形式传递，最终传递给组件的是{query:xxx}
    props: (route) => ({ query: route.query.q })
  }
]

<script>
export default {
  name: 'SearchUser',
  // 这里存在一个query的props
  props: {
    query: {
      type: String,
      required: false,
      default: ''
    }
  }
}
</script>

RouterView插槽设置props

还可以在 RouterView 里面设置 props，例如：

<RouterView v-slot="{ Component }">
  <component
    :is="Component"
    view-prop="value"
   />
</RouterView>

这种设置方式会让所有视图组件都接收 view-prop，相当于每个组件都设置了 view-prop 这个 props，使用时需考虑实际情况来用。

这个一般了解即可，因为每个组件所接收的props都不相同，不同的组件对应不同的props

---

-EOF-