Lernblog: [Vue] verschachteltes Routing

Unterrouten bestehen im Allgemeinen aus mehrschichtigen verschachtelten Komponenten, und jedes Segment des dynamischen Pfads in der URL entspricht auch jeder Schicht verschachtelter Komponenten gemäß einer bestimmten Struktur

1. Benutzerinformationskomponente Profile.vue

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

2. List.vue-Ansichtskomponente

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

3. Verschachteltes Routing konfigurieren. Ändern Sie die Routing-Konfigurationsdatei index.js im Router-Verzeichnis

   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. Ändern Sie die Startseitenansicht 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>