Vue(18) —— 路由嵌套

---

1.什么是路由嵌套

    嵌套路由又称子路由，在实际应用中，一般由多层嵌套的组件组合而成。一样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

/user/foo/profile                     /user/foo/list
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | List       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

    要实现的效果就是上面圈出来的那样，我们要点击的路由被存放在父路由"/user/foo"中，我们需要首先点击进入父路由"/user/foo"中，才能点击子路由"/user/foo/profile"和"/user/foo/list"，通过点击子路由就可以实现下面页面的局部改变/跳转，这对于vue来说不要太简单，因为vue本来就是基于component组件拔插

---

2.怎么使用路由嵌套

    通过上面的解析，我们需要再创建两个视图组件，就按照上面的例子创建user的profile和list两个视图组件

• 为两个子组件配置路由

  //引入两个类，代码固定
  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类和路由类关联起来，代码固定
  Vue.use(VueRouter);
  
  //new一个路由对象，并配置路由转发策略
  export default new VueRouter({
   routes:[
     {
       path: "/Main",
       component: Main,
       children:[
         {
           path: "/user/profile",
           component: UserProfile
         },
         {
           path: "/user/list",
           component: UserList
         }
       ]
     },
     {
       path: "/Login",
       component: Login
     }
   ]
  })
  
  

  注意：为了配合使用Main.vue中的路由节点对应的请求路径，将下图的path从"UserProfile"改为 “/user/profile”，对应的修改"UserList"为 path: “/user/list”

• 既然子路由的父路由是Main，所以我们应该去Main.vue中使用注册的路由，这里我们直接使用element UI上的一个视图模板，就不自己去写了

  <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>
  

---

3.测试

测试完成！

---

4.扩展elementUI的使用

    所以在使用的时候不会写就不要重复造轮子，直接去优秀的开源网站上找自己想要的样式，然后在它的基础上进行修改即可