Blog de aprendizaje: [Vue] enrutamiento anidado

Las subrutas generalmente se componen de componentes anidados de múltiples capas, y cada segmento de la ruta dinámica en la URL también corresponde a cada capa de componentes anidados de acuerdo con una determinada estructura.

1. Componente de información de usuario Profile.vue

   <template>
     <h1>个人信息</h1>
   </template>
   
   <script>
   export default {
     name: "UserProfile"
   }
   </script>
   
   <style scoped>
   
   </style>
   

2. Componente de vista List.vue

   <template>
     <h1>用户列表</h1>
   </template>
   
   <script>
   export default {
     name: "UserList"
   }
   </script>
   
   <style scoped>
   
   </style>
   

3. Configurar enrutamiento anidado Modificar el archivo de configuración de enrutamiento index.js en el directorio del enrutador

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   
   import Main from '../views/Main';
   import Login from '../views/Login';
   
   import UserProfile from '../views/user/Profile'
   import UserList from '../views/user/List'
   
   Vue.use(VueRouter);
   
   export default new VueRouter({
         
         
     routes:[
       {
         
         
         path: '/main',
         component: Main,
         children: [
           {
         
         
             path: '/user/profile',
             component: UserProfile
           },
           {
         
         
             path: '/user/list',
             component: UserList
           }
         ]
       },
       {
         
         
         path: '/login',
         component: Login
       }
     ]
   });
   
   

4. Modificar la vista de la página de inicio Main.vue

   <template>
     <div>
       <el-container>
         <el-aside width="200px">
           <el-menu :default-openeds="['1']">
             <el-submenu index="1">
               <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
               <el-menu-item-group>
                 <el-menu-item index="1-1">
                   <!--插入的地方-->
                   <router-link to="/user/profile">个人信息</router-link>
                 </el-menu-item>
                 <el-menu-item index="1-2">
                   <!--插入的地方-->
                   <router-link to="/user/list">用户列表</router-link>
                 </el-menu-item>
               </el-menu-item-group>
             </el-submenu>
             <el-submenu index="2">
               <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
               <el-menu-item-group>
                 <el-menu-item index="2-1">分类管理</el-menu-item>
                 <el-menu-item index="2-2">内容列表</el-menu-item>
               </el-menu-item-group>
             </el-submenu>
           </el-menu>
         </el-aside>
   
         <el-container>
           <el-header style="text-align: right; font-size: 12px">
             <el-dropdown>
               <i class="el-icon-setting" style="margin-right: 15px"></i>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item>个人信息</el-dropdown-item>
                 <el-dropdown-item>退出登录</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </el-header>
           <el-main>
             <!--在这里展示视图-->
             <router-view />
           </el-main>
         </el-container>
       </el-container>
     </div>
   </template>
   <script>
   export default {
     name: "Main"
   }
   </script>
   <style scoped lang="scss">
   .el-header {
     background-color: #B3C0D1;
     color: #333;
     line-height: 60px;
   }
   .el-aside {
     color: #333;
   }
   </style>