如何在vue-router中将`name`添加到`redirect` URL

voj3qocg  于 2023-08-07  发布在  Vue.js
关注(0)|答案(1)|浏览(106)

下面是我在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

5f0d552i

5f0d552i1#

因此,最后经过长时间的故障排除,我发现我做错了什么,我所要做的就是将name: "customer-page",从父节点移动到子节点。
所以我们的预期是这样的

{
      path: "/customer/",
      component: () => import("@/views/Pages/CustomerDashboard.vue"),
      children: [
        {
          path: "",
          name: "customer-page",
          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" },
        },
      ],
    },

字符串
我所要做的就是把name prop从根目录中移走

path: "/customer/",
      component: () => import("@/views/Pages/CustomerDashboard.vue"),


到空路径重定向

{
          path: "",
          name: "customer-page",
          redirect: "/customer/list",
        },

相关问题