【vue通用后台管理项目（二）】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

嵌套路由可用于固定导航栏，不变动导航栏，只改变每一项导航所涉及内容。此篇为整体UI搭建

一、嵌套路由

1.创建主组件Main.vue

在原有src—views里创建Main.vue，记得将组件渲染

<template>
  <div>
    <h1>main</h1>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>


</template>
<script>
export default {
  data(){
    return{}
  }
}
</script>

<style scoped>

</style>

2.设置主路由和子路由

在index.js里使用import Main from "@/views/Main.vue"，主路由的路径为’/'，用children数组设置多个子路由。默认出来的是Main页面，访问home页面和user页面都是嵌套在Main里
index.js代码如下：

import Vue from 'vue'
//import Router from 'vue-router'
import Home from "@/views/Home.vue"
import User from "@/views/User.vue"
import Main from "@/views/Main.vue";


//import Home from "../views/Home.vue";
//import User from "../views/User.vue";
import VueRouter from "vue-router";

//Vue.use(Router)
Vue.use(VueRouter)

//1.创建路由组件

//2.将路由与组件进行映射
const routes=[
    // 主路由
    {
        path:'/',
        component: Main,
        children:[
            // 子路由/嵌套路由
            {path:'home',component:Home},
            {path:'user',component: User}
        ]
    },

]

//3.创建router实例
const router = new VueRouter({
    mode:'history',
    routes // (缩写) 相当于 routes: routes
})

// 将路由器对外暴露
export default router

//4.在App.vue将路由匹配到的组件渲染

// export default new Router({
//     routes:[
//         {
//             path:'/home',
//             component:Home
//         },
//         {
//             path:'/user',
//             component: User
//         }
//     ]
// })

二、整体UI搭建

1.框架搭建

参考Element官网的Container布局容器：链接: link
将倒数第二个代码复制进Main.vue的div容器里

Main.vue

<template>
  <div>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>
          <!-- 路由出口 -->
          <!-- 路由匹配到的组件将渲染在这里 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>


</template>
<script>
export default {
  data(){
    return{}
  }
}
</script>

<style scoped>

</style>

2.左侧菜单栏引入

参考Elements官网的NavMenu导航菜单：链接: link

（1）虽然可以放在Main.vue的Aside区域，但为实现组件化，建议在components创建新的CommonAside.vue，便于后期维护。把代码复制进template标签
注意格式：

（2）在Main.vue的script里引入组件
main.vue的代码如下（示例）：

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <common-aside />
      </el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>
          <!-- 路由出口 -->
          <!-- 路由匹配到的组件将渲染在这里 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>


</template>
<script>
//引入CommonAside组件
import CommonAside from "@/components/CommonAside.vue";

export default {
  data(){
    return{}
  },
  components:{
    CommonAside
  }
}
</script>

<style scoped>

</style>

运行结果如下：