vue3 - router-view标签的奇怪用法？

Question

有人看得懂这个router-view 写法是什么意思吗？

我在官网并未看到类似的写法

<router-view #="{ Component, route }">
  <component :is="Component" :key="route.path" />
</router-view>

问了一下ai说是插槽结构，没看懂。vue版本是3.3，vue-router是4.0.16

Answer 1

Answer 2

// 这种使用了一些简写规则,下面是这个写法的完整写法
<router-view>
 <template #default="{ Component, route }">
   <component :is="Component" :key="route.path" />
 </template>
</router-view>

#= 没有加名称默认是 #default。在只有一个默认插槽的情况下,插槽允许直接设置在组件上。插槽本质上就一个函数,{ Component, route } 这部分可以理解为函数传入的参数

Answer 3

在 Vue 3 和 Vue Router 4 的上下文中，你看到的 <router-view> 标签的写法确实是一个不常见的用法，并且实际上它并不是 Vue Router 官方 API 的一部分。这种写法试图通过解构插槽的 props 来访问组件和路由信息，但这并不是 <router-view> 组件直接支持的功能。

在 Vue Router 4 中，<router-view> 主要用于渲染匹配的路由组件。然而，Vue 3 引入了 Composition API 和更灵活的插槽系统（包括作用域插槽），这可能导致了一些混淆。

对于你提供的代码片段，它看起来像是尝试以某种方式访问 <router-view> 提供的默认插槽 prop，但实际上这是不正确的。<router-view> 默认不提供名为 Component 和 route 的插槽 prop。这些通常是通过 Vue Router 的其他机制（如 beforeRouteEnter 或 beforeRouteUpdate 守卫）或直接在路由配置中定义的组件内部来访问的。

如果你想要基于路由动态渲染不同的组件，并且希望利用 Vue 3 的 <component> 组件和动态 :is 绑定，你通常不需要在 <router-view> 中这样做。相反，你可以在路由配置中直接指定组件，并在 <router-view> 之外（如果需要的话）使用 <component> 来动态渲染其他组件，但这通常与路由无关。

例如，如果你的意图是根据路由的不同部分动态渲染不同的内容，你应该在路由配置中设置不同的组件，并让 <router-view> 负责渲染这些组件。如果你需要在组件内部基于路由信息做一些事情，可以使用 Vue Router 提供的 useRoute() 和 useRouter() 组合式 API。

如果你的目标是学习如何在 Vue 3 和 Vue Router 4 中使用作用域插槽，你可能需要查看 Vue 的官方文档中关于作用域插槽的部分，但请注意 <router-view> 并不直接支持作用域插槽来传递组件或路由信息。这些信息通常是通过其他方式（如路由守卫、路由元数据或组件内的组合式 API 调用）来访问的。