无法渲染路由器子项

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 ，就没有地方可以安装他们的孩子。