将 props 传递给路由组件

在你的组件中使用 $route 或 useRoute() 会与路由紧密耦合，这限制了组件的灵活性，因为它只能用于特定的 URL。虽然这不一定是件坏事，但我们可以通过 props 配置来解除这种行为：

回到我们之前的示例：

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

import User from './User.vue'

// 传入 `createRouter`
const routes = [{ path: '/users/:id', component: User }]

我么可以通过声明props在组件中删除对$route的直接依赖

<!-- User.vue -->
<script setup>
defineProps({
  id: String,
})
</script>

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

要在组件中能够通过这种方式接收路由参数,需要如下配置;

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

命名视图

对于有命名视图的路由,需要在每个命名视图定义props配置

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

对象模式

当props是一个对象时,它们将原样设置为诶组件的props,当props是静态的时候很有用

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

函数模式

props可以是一个函数,参数为对应当前path的route对象

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

URL /search?q=vue 将传递 {query: 'vue'} 作为 props 传给 SearchUser 组件

请尽可能保持props函数为无状态的,因为它只在路由发生变化时起作用.如果需要状态来定义props,需要使用包装组件,这样vue才可以对状态变化做出相应

通过RouterView传参

可以通过RouterView插槽传递任意参数

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

Warning
这种情况下,所有的视图组件都会接收到view-prop,意味着所有的视图组件都声明了一个view-prop prop.但是view-prop可能只是对其中的一个组件是有用的.