вложенный роутер с ленивой нагрузкой не работает корректно - PullRequest
Новая
       81

вложенный роутер с ленивой нагрузкой не работает корректно

0 голосов
/ 21 октября 2019

Я новичок в Vue и хочу перемещаться по Product дочерним маршрутам, но он не работает и вместо этого получает страницу NotFound.
Так что мой вопрос в том, как сделать это правильно. Или кто-то может дать некоторые детали. Спасибо

Онлайн редактор

index.js

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

product.js

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

1 Ответ

0 голосов
/ 21 октября 2019

Есть небольшие ошибки, которые приводят к неожиданному результату.

В product.js роутере вы не должны снова добавлять префикс products, поскольку он уже входит в область действия /products. Маршрут NotFound также не требуется в этом определении, так как родительский NotFound уже соответствует тем же шаблонам маршрута. Вы можете переписать определение маршрутизатора продукта, как показано ниже: 

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

Затем, в ProductList.vue, вы должны переписать свой router-link, как показано ниже: 

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

Наконец, в ProductPage.vue, вам не хватает <router-view></router-view>, необходимого для рендеринга ваших дочерних маршрутов, как объяснено в документации vue router. . Вы можете переписать его, как показано ниже: 

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

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