下面是我在Vue项目中的路由器设置
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/",
name: "home",
redirect: "/dashboard",
},
{
path: "/dashboard",
name: "dashboard-page",
component: () => import("@/views/Pages/AppDashboard.vue"),
},
{
path: "/customer/",
name: "customer-page",
component: () => import("@/views/Pages/CustomerDashboard.vue"),
children: [
{
path: "",
redirect: "/customer/list",
},
{
path: "list",
name: "customer-list",
component: () =>
import("@/views/Pages/SubPages/Customers/CustomerTable.vue"),
},
{
path: "add",
name: "add-customer",
component: () =>
import("@/views/Pages/SubPages/Customers/CustomerForm.vue"),
props: { type: "New" },
},
{
path: ": id",
name: "edit-customer",
component: () =>
import("@/views/Pages/SubPages/Customers/CustomerForm.vue"),
props: { type: "Edit" },
},
],
},
],
});
export default router;
字符串
因此,每当我没有在customer
的子级中向重定向URL添加名称时,我都会收到以下dev-warning
[Vue Router warn]: The route named "customer-page" has a child without a name and an empty path. Using that name won't render the empty path child so you probably want to move the name to the child instead. If this is intentional, add a name to the child route to remove the warning.
型
但是,在我将name: default-redirect
添加到该子组件之后,所有子组件都消失了,并且在router-view
区域中得到一个空白输出。
我在这里要做的就是,每当有人登陆到/customer
时,页面应该重定向到/customer/list
。
这是一个Bug还是我做错了什么?
这里是链接到https://codesandbox.io/与最低要求的代码,将给予相同的确切错误,当你试图在 chrome 运行。尝试在/customer
路由中添加/删除name:default-redirect
1条答案
按热度按时间5f0d552i1#
因此,最后经过长时间的故障排除,我发现我做错了什么,我所要做的就是将
name: "customer-page",
从父节点移动到子节点。所以我们的预期是这样的
字符串
我所要做的就是把name prop从根目录中移走
型
到空路径重定向
型