无法渲染路由器子级

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，就没有地方可以挂载它们的子组件。