vue-router的嵌套使用(children),实现页中页效果

时间:2021-1-8 作者:admin

我们所看到的页面实际都是直接或间接由APP.vue根组件映射出来的
嵌套的组件需要嵌套的路由来映射,配置好父路由后,需要在哪个路由页面里面映射,就在哪个父路由添加children属性。

步骤一:配置完父路由后添加子路由

vue—–路由(router)的全局配置
需要注意的细节:children里面的path不需要加“/”,以斜杠开头会被当做根路径
children 配置就是像 routes 配置一样的路由配置数组,可以嵌套多层路由。

{
            // 父路由
            name: 'index1',
            path: '/index1',
            // 异步引入组件
            component: () => import('@/views/index1.vue'),
            // 子路由
            children: [
                {
                    name: 'postList',
                    path: 'postList',//无需添加斜杠
                    component: () => import('@/views/postList.vue')
                },
            ]
        }

步骤二:将子路由放置父路由需要映射的位置

<router-view></router-view>

<template>
  <div class="index1">
    <div class="left"></div>
    <div class="right">
      <!-- 需要将子路由映射的位置,出口 -->
      <router-view></router-view>
      <router-link :to="{ name: 'postList' }">点我映射子路由</router-link>
    </div>
  </div>
</template>

<script>
export default {};
</script>

.<style lang="less" scoped>
.index1 {
  width: 100%;
  height: 100%;
  display: flex;
  .left {
    width: 30%;
    height: 100%;
    background-color: aqua;
  }
  .right {
    flex: 1;
    background-color: coral;
  }
}
</style>
</style>

步骤三:示例需要引入的页面

<template>
  <div class="postList">我是子路由映射过来的哦</div>
</template>

<script>
export default {};
</script>

.<style lang="less" scoped>
.postList {
  margin: 50px;
  background-color: darkgreen;
  width: 500px;
  height: 500px;
}
</style>

效果

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。