无法渲染路由器子级

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>

我试图将组件列表移动到不在shop的子商店中，这是可行的，但是当我在child shop上使用它时，它不会呈现和工作

Answer 1

如果您使用路由的constexpr属性，则所有子路由都将安装在父组件中。就您而言，这意味着它已安装在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>

在这种情况下，App.vue是根组件，因为它是在main.js中定义的。路由器说// 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 }); 是来自child1的子路由，它呈现组件/。因此，我们将看到app.vue的开始和结束。嵌套在其中，我们将看到ParentComponent的开始和结束。然后嵌套在其中，我们看到Child1。在这两个组件中没有ParentComponent的情况下，他们的孩子将无法安放。