传参路由

@Props

路由组件传参 - props

按照组件传参的形式传递路由参数

使用更方便

默认是针对动态路由 | params 类型的路由参数；而查询路由 | query 需要特别处理

配置项 props 可以是：布尔值、对象或函数

更多信息，请访问 Props

props 为布尔值

应用最多；动态路由参数将被当作同名属性参数在组件中使用

配置动态路由并启用 props 属性

{
    path: '/home/:id/:title/:cont/:other?',
    name: "home",
    component: Home,
    props: true
}

传递路由参数 - 更多参数传递方式，请参考动态路由

<router-link to="/home/10/webjs/hi">html</router-link>

接收路由参数 - 按组件传参时，普通属性的定义和使用

const props = defineProps(['id', 'title', 'cont'])

<template> - 使用|渲染路由参数

<div>{{id}} - {{title}} - {{cont}}</div>

props 为函数

接收当前的 route 对象作为参数，包含路由的各种信息：name、params、path、query；返回一个 defineProps() 的声明

适用于需要特别处理的情况，和路由类型及参数无关，可以用来处理查询路由

除了使用路由信息外，还可以添加自定义的静态数据

[] 使用查询路由

配置路由参数 - 使用路由的 query 数据

{
    path: '/home',
    name: "home",
    component: Home,
    props: route => route.query
}

传递路由参数 - 更多参数传递方式，请参考查询路由

<router-link :to="{ path: '/home', query: { id: 100, title: 'leading', cont: 'hi' } }">home</router-link>

接收路由参数

const props = defineProps(['id', 'title', 'cont'])

<template> - 使用|渲染路由参数

<div>{{id}} - {{title}} - {{cont}}</div>

[] 使用动态路由 - 注意类型转换

{
    path: '/about/:id/:msg',
    name: 'about',
    component: () => import('../views/AboutView.vue'),
    props: route => ({ id: Number(route.params.id), msg: route.params.msg })
}

const props = defineProps({
    id: Number,
    msg: String
})

props 为对象

定义的对象直接作为属性在组件中使用；和路由类型及参数无关

适合传递静态数据；应用不多

1. 路由配置

{
    path: '/about/:id',
    name: 'about',
    component: () => import('../views/AboutView.vue'),
    props: {
        msg: { title: 'About', flag: true },
    }
}

2. 路由组件 - <script> 中声明对应的 props 属性并在 <template> 中使用

const props = defineProps({
    msg: {
        flag: Boolean,
        title: String
    }
})