我有一个名为'/ 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>
我试图将该组件列表移动到商店的儿童,这是工作,但当我在儿童商店使用它时,它不会渲染和工作
如果使用路径的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
,他们的孩子将无法安装。