vue.js - 具有延迟加载的 Vue 命名视图

Question

我正在尝试创建我的路线，但我希望它们都使用router-view我的应用程序中的默认值。查看文档：

https://router.vuejs.org/guide/essentials/named-views.html

我应该能够通过执行以下操作来定位视图：

const routes = [
  {
    path: "/",
    name: "home",
    component: {
      default: Home
    },
  },
]

我想和一个孩子一起做这个，所以我这样做了：

{
  path: "/categories",
  name: "categories",
  meta: {
    title: "Categories",
  },
  component: Categories,
  children: [
    {
      path: ":slug",
      name: "product-list",
      meta: {
        title: "Categories",
      },
      component: { default: ProductList },
      ],
    },
  ],
},

我没有得到任何编译错误，但是当导航到/categories/televisions它时只显示Categories组件，而不是ProductList。

所以我的第一个问题是，孩子们可以瞄准应用程序级别router-view吗？我还尝试添加这样的新内容router-view：

<router-view />
<router-view name="root" />

然后将我的路线更新为：

{
  path: "/categories",
  name: "categories",
  meta: {
    title: "Categories",
  },
  component: Categories,
  children: [
    {
      path: ":slug",
      name: "product-list",
      meta: {
        title: "Categories",
      },
      component: { root: ProductList },
    },
  ],
},

但这也不起作用。如果可以做到这一点，那么我的下一个问题就是我要去的地方。我可以使用延迟加载的组件和目标命名/默认router-views吗？例如，我有这个功能：

const lazyLoad = (name) => {
  return () => import(`../views/${name}/${name}.component.vue`);
};

我从我的路线中调用如下：

{
  path: "/categories",
  name: "categories",
  meta: {
    title: "Categories",
  },
  component: lazyLoad("categories"),
  children: [
    {
      path: ":slug",
      name: "product-list",
      meta: {
        title: "Categories",
      },
      component: lazyLoad("product-list"),
    },
  ],
},

我可以这样做吗？

{
  path: "/categories",
  name: "categories",
  meta: {
    title: "Categories",
  },
  component: lazyLoad("categories"),
  children: [
    {
      path: ":slug",
      name: "product-list",
      meta: {
        title: "Categories",
      },
      component: { default: lazyLoad("product-list") },
    },
  ],
},

并瞄准根router-view？

标签： vue.jsvuejs2vue-router