router-view标签的奇怪用法？

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

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

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

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

阅读 1.1k

在 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 调用）来访问的。

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

router-view标签的奇怪用法？

Vue3: 响应式 props 解构得到的变量将不是响应式？也不会更新？

一个js输出格式的奇葩需求？

有关vue3 watchEffect 依赖收集的疑问?

Vite+Vue3，怎样实现标签的内容加密，不是代码混淆？

NuxtLink 有没有一个属性能控制当前链接是否可以点击？

背景图片超过容器的高度不能完全展示？

vue3+vite+electron+element-plus在el-form中使用el-input，为什么el-input获取到焦点之后只能输入一个字符？

router-view标签的奇怪用法？

Vue3: 响应式 props 解构得到的变量将不是响应式？也不会更新？

一个js输出格式的奇葩需求？

有关vue3 watchEffect 依赖收集的疑问?

Vite+Vue3，怎样实现标签的内容加密，不是代码混淆 ？

NuxtLink 有没有一个属性能控制当前链接是否可以点击？

背景图片超过容器的高度不能完全展示？

vue3+vite+electron+element-plus在el-form中使用el-input，为什么el-input获取到焦点之后只能输入一个字符？

Vite+Vue3，怎样实现标签的内容加密，不是代码混淆？