传参路由

@Props

路由组件传参 - props

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

使用更方便

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

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

更多信息，请访问 Props

props 为布尔值

开启路由传参；默认为 false，不开启

适合动态路由

使用简单；应用方便

[] 使用动态路由

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

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

2. 传递路由参数

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

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

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

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

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

props 为函数

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

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

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

[] 使用查询路由

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

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

2. 传递路由参数

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

3. 接收路由参数

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 为对象

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

适合传递静态数据；多组件共享，请使用状态管理 Pinia

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
  }
})