我使用路由設定了一個新的 Vue3 專案。在 src 中，我創建了一個新目錄“foo”Index.vue
<template>
<div>
<div>Foo</div>
<router-view />
</div>
</template>
和一個子目錄“views” Home.vue
<template>
<div>Bar</div>
</template>
在 foo 目錄中，我還設定了一個router.js我注冊該功能的所有視圖的位置
import Index from "./Index.vue";
import Home from "./views/Home.vue";
const featureRoute = {
path: "/foo",
component: Index,
children: [
{
path: "/",
component: Home,
},
],
};
export default router => {
router.addRoute(featureRoute);
};
在主路由器檔案中，我將代碼更改為
import { createRouter, createWebHistory } from "vue-router";
import registerFooRouter from "../foo/router";
const routes = [
{
path: "/",
redirect: "/foo",
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
registerFooRouter(router);
export default router;
的App.vue：
<template>
<router-view />
</template>
我的期望：
運行應用程式時，我被重定向到/foo. 它將呈現一個div內容為“Foo”的內容，下面是另一個div內容為“Bar”的內容
發生什么了：
重定向作業正常。但不幸的是，我所看到的只是div內容為“Foo”的內容。div缺少內容為“Bar”的第二個。
所以它似乎無法渲染Home.vue檔案。
有人知道這里缺少什么嗎？
uj5u.com熱心網友回復：
path: "/",inside children 被 Vue Router 解釋為根路徑。如果你想在“/foo”路由中渲染一些“默認”的東西，使用空字串：
const featureRoute = {
path: "/foo",
component: Index,
children: [
{
path: "",
component: Home,
},
],
};
檢查檔案中的最后一個示例
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/328318.html