如何使用vuerouter的v-slot API

v-slot是Vue.js 2.6.0版本中引入的新语法糖，用于替代旧的slot语法。v-slot API是Vue Router 3.1.0版本中引入的新API，用于向嵌套路由组件中传递props。

在使用v-slot API时，需要在<router-view>组件中添加v-slot指令，并且指定一个名称，例如：

<router-view v-slot:default="{ route }">
  <h2>{{ route.meta.title }}</h2>
</router-view>

这里我们使用v-slot:default指令，并将route对象作为参数传递给组件。在组件中，我们可以使用route对象来获取当前路由的元数据（meta）中的标题（title）。

如果你的路由组件是嵌套的，可以使用嵌套的v-slot指令：

<router-view>
  <template v-slot:header="{ route }">
    <h2>{{ route.meta.title }}</h2>
  </template>
  <template v-slot:default="{ route }">
    <p>{{ route.meta.description }}</p>
  </template>
</router-view>

在这个例子中，我们使用两个v-slot指令，一个用于header，一个用于default。这样我们就可以在嵌套路由组件中向每个组件传递不同的props。

需要注意的是，v-slot指令只能在<router-view>组件中使用，如果你需要在其他组件中传递props，可以使用普通的slot语法。