无法渲染路由器的孩子

问题描述 投票:-1回答:1

我有一个名为'/ shop'的路由器,并且名为listproduct的组件的子列表是/ list /:id但是当我在链接上呈现时,我会像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>

我试图将该组件列表移动到商店的儿童,这是工作,但当我在儿童商店使用它时,它不会渲染和工作

vue.js vuejs2 router vue-router
1个回答
0
投票

如果使用路径的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,他们的孩子将无法安装。

Edit Vue + Vuex + VueRouter template

© www.soinside.com 2019 - 2024. All rights reserved.