Vuejs2 延迟加载的嵌套路由器无法正常工作

我是Vue新手，希望浏览

产品

子路径，但它不起作用&取而代之的是获取

未找到

页面
因此，我的问题是如何使它正确。 或者有人能提供一些细节。谢谢

index.js

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/products',
    component: () => import('../views/ProductPage.vue'),
    children: productRouter
  },
  {
    path: '/**',
    component: NotFound
  }
]

const productRouter = [
  {
    path: '',
    name: 'products',
    component: ProductPage
  },
  {
    path: 'product/:id',
    name: 'ProductDetails',
    component: ProductDetails
  },
  {
    path: '**',
    component: NotFound
  }
]

product.js

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/products',
    component: () => import('../views/ProductPage.vue'),
    children: productRouter
  },
  {
    path: '/**',
    component: NotFound
  }
]

const productRouter = [
  {
    path: '',
    name: 'products',
    component: ProductPage
  },
  {
    path: 'product/:id',
    name: 'ProductDetails',
    component: ProductDetails
  },
  {
    path: '**',
    component: NotFound
  }
]

---

有些小错误导致了你意想不到的结果

在

product.js

路由器中，您不应再次使用

products

作为前缀，因为它已经在

/products

路由的范围内。此定义中也不需要

NotFound

路由，因为父级的

NotFound

已匹配相同的路由模式。您可以重写产品路由器定义，如下所示：

const productRouter = [
  {
    path: ':id',
    name: 'ProductDetails',
    component: ProductDetails
  }
]

<template>
  <div id="productPage">
    <h1>This is an Product Page</h1>

    <ProductList :items="products"> </ProductList>
    <router-view></router-view>
  </div>
</template>

然后，在

ProductList.vue

中，您应该重写

路由器链接

，如下所示：

<router-link :to="`/products/${item.id}`"> {{ item.description }} </router-link>