VUE框架：vue2转vue3全面细节总结（3）路由组件传参

 

大家好，我是csdn的博主：lqj_本人

这是我的个人博客主页：

lqj_本人_python人工智能视觉（opencv）从入门到实战,前端,微信小程序-CSDN博客

最新的uniapp毕业设计专栏也放在下方了：

https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482

平时我也会在哔哩哔哩视频中讲解一些大家平时用得到的东西，

哔哩哔哩欢迎关注：

卢淼儿的个人空间-卢淼儿个人主页-哔哩哔哩视频

目录

路由组件传参

布尔模式

命名视图

对象模式

---

路由组件传参

当我们获取路由参数时，通常在模板中使用 $route ，在逻辑中调用 useRoute() 方法，如：

<template>
  <div>User {
   
   { $route.params.id }}</div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)
</script>

以上方法比较麻烦，而且与路由紧密耦合，不利于组件封装。我们可以在创建路由时通过 props 配置来解除这种行为：

const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: User,
    props: true
  }
]

此时 route.params 将直接被设置为组件的 props，这样组件就和路由参数解耦了：

<template>
  <div>User {
   
   { id }}</div>
</template>

<script setup lang="ts">
const props = defineProps<{
  id: string
}>()
console.log(props.id)
</script>

布尔模式

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

命名视图

对于有命名视图的路由，你必须为每个命名视图定义 props 配置：

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

对象模式

当 props 是一个对象时，它会将此对象设置为组件 props 。当 props 是静态的时候很有用。

const routes = [
  {
    path: '/user',
    component: User,
    props: { newsletterPopup: false }
  }
]

 函数模式

我们也可以创建一个返回 props 的函数。这允许你将参数转换为其他类型：

const routes = [
  {
    path: '/user',
    component: User,
    props: route => ({ id: route.query.userId })
  }
]

如 /user?userId=123 参数会被转为 { id: '123' } 作为 props 传给 User 组件。