Vue3通过RouterView将道具传递给组件呈现。
Vue3通过RouterView将道具传递给组件呈现。
提问于 2022-04-09 09:00:15
我有这样的代码：
<template>
<router-view />
</template>
<script setup lang="ts">
...
const product: Ref<IProduct|undefined>: ref();
...
</script>我需要将product作为支柱传递给router-view中加载的组件。
一段时间前，这是可能的，就像<router-view :an-prop="product" />一样，但是自从Vue的新版本发布后，我得到了警告：
无关的非支持属性(产品)被传递给组件，但由于组件呈现片段或文本根节点，因此无法自动继承。
也许我是瞎子，但老实说，我在官方文档中没有发现任何关于它的东西，只有使用<router-view>的微不足道的例子和编程使用vue路由器的数十亿个琐碎的例子。经过几个小时的实验和搜索引擎的研究，我发现现在router-view使用了slots，最终得到了这样的代码：
<router-view v-slot="{ Component }">
<component :is="Component" />
</router-view>事实上，这并没有给我多少帮助。不管怎么说，我不知道下一步该怎么办。在现在的RouterView中，有任何方法可以通过vue3将道具传递给组件呈现吗？
回答 1
Stack Overflow用户
发布于 2022-04-09 16:46:13
刚刚测试了一个新的vue 3项目。它工作得很好，直接将它传递给RouterView。然后，RouterView呈现的任何组件都可以访问该支柱。
示例：
路由器/index.js
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/",
name: "default",
component: () => import("../views/HomeView.vue"),
},
{
path: "/home",
name: "home",
component: () => import("../views/HomeView.vue"),
},
{
path: "/about",
name: "about",
component: () => import("../views/AboutView.vue"),
},
],
});
export default router;App.vue
<template>
<header>
<nav>
<RouterLink to="/home">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</header>
<RouterView :product="product" />
</template>
<script setup>
import { RouterLink, RouterView } from "vue-router";
import { ref } from "vue";
const product = ref({ name: "bmw e46" });
</script>HomeView.vue
<template>
<div class="about">
<h1>This is home page</h1>
<p>{{ product.name }}</p>
</div>
</template>
<script setup>
defineProps({
product: { type: Object },
});
</script>AboutView.vue
<template>
<div class="about">
<h1>This is about page</h1>
<p>{{ product.name }}</p>
</div>
</template>
<script setup>
defineProps({
product: { type: Object },
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71806594
复制相关文章
相似问题
腾讯云开发者
