Vue系列教程（19）- 嵌套路由（ElementUI）

1. 引言

通过前面的章节，我们已经熟悉了ElementUI的使用 ，有兴趣的同学可以参阅下：

• 《Vue系列教程（01）- 前端发展史》
• 《Vue系列教程（02）- Vue环境搭建、项目创建及运行》
• 《Vue系列教程（03）- Vue开发利器VsCode》
• 《Vue系列教程（04）- VsCode断点调试》
• 《Vue系列教程（05）- 基础知识快速补充（html、css、js）》
• 《Vue系列教程（06）- Vue调试神器（vue-devtools）》
• 《Vue系列教程（07）- Vue第一个程序（MVVM模式的引入）》
• 《Vue系列教程（08）- 基本语法》
• 《Vue系列教程（09）- 事件绑定》
• 《Vue系列教程（10）- Model数据内容双向绑定》
• 《Vue系列教程（11）- 组件详解》
• 《Vue系列教程（12）- Axios异步通信》
• 《Vue系列教程（13）- 计算属性（computed）》
• 《Vue系列教程（14）- 插槽（slot）》
• 《Vue系列教程（15）- 事件内容分发（$emit）》
• 《Vue系列教程（16）- 模块打包器（webpack）》
• 《Vue系列教程（17）- 路由（vue-router）》
• 《Vue系列教程（18）- 集成UI框架（ElementUI）》

本文继续衔接上一篇博客，主要讲解Main.vue里面的内容。

2. 案例

嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。

2.1 创建子路由

① 在components文件夹里定义user文件夹，并新建4个文件，如下： ② Profile.vue（个人信息）里面的内容：

  个人信息


  export default {
    name: "UserProfile"
  }

③ List.vue（用户列表）里面的内容：

  用户列表


  export default {
    name: "UserList"
  }

④ ContentList,vue（内容列表）里面的内容 :

  内容列表



  export default {
    name: "ContentList"
  }

⑤ ClassManagement.vue（分类管理）里面的内容：

  分类管理



  export default {
    name: "ClassManagement"
  }

2.2 引用子路由

① 修改Main.vue的内容，这里使用了 ElementUI 布局容器组件，代码如下：

  
    
      
        
          
            用户管理
            
              
                
                个人信息
              
              
                
                用户列表
              
            
          
          
            内容管理
            
              
                
                分类管理
              
              
                
                内容列表
              
            
          
        
      

      
        
          
            
            
              个人信息
              退出登录
            
          
        
        
          
          
        
      
    
  


  export default {
    name: "Main"
  }


  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }

2.3 定义子路由

在index.js里定义，代码如下：

//导入vue
import Vue from 'vue';
import VueRouter from 'vue-router';
//导入组件
import Main from "../components/Main";
import UserList from "../components/user/List";
import UserProfile from "../components/user/Profile";
import UserClassManagement from "../components/user/ClassManagement";
import UserUserProfile from "../components/user/ContentList";
//使用
Vue.use(VueRouter);
//导出
export default new VueRouter({
  routes: [
    {
      //首页
      path: '/main',
      component: Main,
      //  配置子路由
      children: [
        {
          path: '/user/profile',
          component: UserProfile,
        }, {
          path: '/user/list',
          component: UserList,
        },
        {
          path: '/user/manager',
          component: UserClassManagement,
        }, {
          path: '/user/userProfile',
          component: UserUserProfile,
        }
      ]
    },
    //  默认首页
    {
      path: '/',
      redirect: '/main'
    },
  ]
})

2.4 运行程序

运行程序npm run serve，浏览器输入http://localhost:8081/#/main，效果如下：

默认页面点击个人信息点击用户列表

本文完!