Vue中chlidren的作用:
chlidren实现嵌套路由地作用!
index.js中路由的写法:
index.js中路由的写法:
routes: [
{
path: '/',
component: () => import(`@/views/bilibili`), bilibili------文件夹名称
children: [ (children)起嵌套的作用
{
path: '', 在 bilibili文件夹下创建一个(index)组件里边放通用的组件的路由,
name: 'Component', (component)和(reuse)同时调用(bilibili)下(index)组件调用通用的组件不会影响到文件以外的组件。
component: () => import(`@/views/bilibili/component`) component-------文件夹名称
},
{
path: 'reuse',
name: 'Reuse',
component: () => import(`@/views/bilibili/reuse`) reuse------文件夹名称
}
]
},
{
path: '/course',
name: 'course',
component: () => import(`@/curriculum/course/index`)
}
]
index组件中写的内容
<template>
<div class="">
<top></top> 两个页面共同的内容
<router-view></router-view> 路由
</div>
</template>
<script>
import top from '@/views/bilibili/component/top'; 调用共同的页面
export default {
components: {
top
}
};
版权声明:本文为qq_41627870原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。