не могу отрисовать роутер детей

Question

У меня есть роутер с именем '/ shop', а потомками является / list /: id для названного компонента - listproduct но когда я рендеринг по ссылке, я иду как mylocalhost/shop/list/0812018381 это делает? вот мои маршруты

{
      path: '/shop',
      name: 'shop',
      component: () => import('./components/shop.vue'),
      children: [
        {
          path: '/list/:id',
          name: 'list',
          component: () => import('./views/detail.vue'),
        },
      ],
}

компонент в моем магазине примерно такой

<b-col>
            <div class="thiscaption my-4 p-2">

              <b-link :to="`/shop/${product._id}`">
                <h4>{{ product.productName }}</h4>
              </b-link>

              <span>
                {{
                  product.desc
                    .split(' ')
                    .slice(0, 8)
                    .join(' ')
                }}...</span
              >
              <br />

              <span>
                <b>${{ product.price }} </b>
              </span>
              <br />
              <b-button type="submit" variant="primary" class="p-2 
               my-4">add to cart</b-button>
            </div>
  </b-col>

Я пытался переместить этот список компонентов, чтобы он не был в дочерних магазинах, это была работа, но когда я использую его в дочернем магазине, он не рендерит и не работает

Answer 1

Если вы используете свойство children маршрута, все дочерние маршруты монтируются в родительский компонент . В вашем случае это означает, что он установлен в shop.vue. Чтобы иметь возможность монтировать компонент в родительском компоненте, родительский компонент должен содержать элемент <router-view />.

Возьмем, к примеру, следующие компоненты:

<!-- App.vue -->
<template>
  <div id="app">
    <span>Start App.vue</span>
    <router-view/>
    <span>End App.vue</span>
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <div class="parent-component">
    <span>Start Parent component</span>
    <router-view/>
    <span>End Parent component</span>
  </div>
</template>

<!-- Child1.vue -->
<template>
  <div class="comp-child1">Child1.vue</div>
</template>

Кроме того, у нас есть следующий маршрутизатор:

// router.js
import Vue from "vue";
import VueRouter from "vue-router";

import ParentComponent from "./components/ParentComponent";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    component: ParentComponent,
    children: [
      {
        path: "",
        redirect: "/child1"
      },
      {
        path: "child1",
        component: Child1
      },
      {
        path: "child2",
        component: Child2
      }
    ]
  }
];

export default new VueRouter({
  routes
});

В этом случае App.vue является корневым компонентом, поскольку он определен в main.js. Маршрутизатор сообщает, что child1 является дочерним маршрутом от /, который отображает компонент ParentComponent. Поэтому мы увидим начало и конец app.vue. Вложив туда, мы увидим начало и конец ParentComponent. Затем, вложенный внутрь этого, мы видим Child1. Без router-view ни в одном из этих компонентов не было бы места для их детей.