The nested use of vue-router (children), to achieve page in page effect

All the pages we see are actually directly or indirectly mapped from the root component of app. vue. Nested components need nested route mapping. After configuring the parent route, add the children attribute to the parent route that needs to be mapped in the routing page.

Step 1: Configure the parent route and add child routes

Vue —– Global configuration of the router. The children configuration is an array of routing configurations like the Routes configuration. It can be nested with multiple layers of routes.

{
            / / parent routing
            name: 'index1'.path: '/index1'.// Asynchronously import components
            component: () = > import('@/views/index1.vue'),
            / / zi lu by
            children: [{name: 'postList'.path: 'postList'.// No slashes needed
                    component: () = > import('@/views/postList.vue')},]}Copy the code

Step 2: Place the child route to the location where the parent route needs to be mapped

<router-view></router-view>

<template>
  <div class="index1">
    <div class="left"></div>
    <div class="right">
      <! -- Need to map the location of the child route, exit -->
      <router-view></router-view>
      <router-link :to="{ name: 'postList' }">Point me to the subroute</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>
Copy the code

Step 3: Sample the pages you want to import

<template>
  <div class="postList">I'm a mapping of subpaths</div>
</template>

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

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

The effect