使用Vue多层（三层）嵌套路由器构建控制台页面

页面结构

• 时间仓促，没法写完整示例，意会。有时间了再认真写一下

1. 首先控制台这个整体是一个大页面，和比如登录页面，注册页面是同等级的，就是一整个页面。
2. 这个控制台页面里，我们又可以分解为，左边导航栏用来导航，右边一块作为显示区域（就当作是一个页面在那个地方，不用管里面是什么，就是留了一块空地方放第二层路由模块的内容）
3. 控制台页面右边那块空地方里面我们可能又会需要分各种功能，那么我们又可以使用分解的思想去理解，这块空地方我们取上方作为导航，下方依旧产生一块空地方来放第三层路由模块的内容

• 如果在控制台顶部要加用户信息、联系信息加载第一层路由的大页面里去就行了。
• 

全部模块

• 代码尽量从简
• el-container这些是ElementUI的，自行百度理解。
• el-menu上面写的router自行百度

1. 控制台这个大页面的·

<template>
    <el-container>
        <el-header>顶部</el-header>
        <el-aside>
<!--            侧边栏用来导航-->
            <el-menu
                    router
                    style="text-align: left;min-width: 200px;"
            >
                <el-submenu index="0">
                    <template slot="title">
                        <span>XXXX</span>
                    </template>
                    <el-menu-item index="user"><i class="el-icon-s-tools"></i>XX管理</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-main>
<!--            这里就是放所说的空地方-->
            <router-view></router-view>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "Console"
    }
</script>

<style scoped>

</style>

2. 右边那个空地方里就是放的第二层路由对应模块的内容了，继续做第三层路由，跟前面差不多

• 如果是用侧边导航，可以直接跟上面代码一样
• 这里讲解下如果用的是卡片式的如何处理
  
• 我们可以看到卡片式的点击卡片之后是显示这个卡片内部对应的内容，可是我们分解的时候这里面是放一个空地方，直接放外边也不好，放里面渲染了n个。

解决办法：卡片内容router-view用v-if根据路由渲染

• Vue控制台这个大页面的模块代码

<template>
    <el-container>
        <el-tabs type="border-card" style="width: 100%" v-model="activeViewPath" @tab-click="handleViewChange">
            <el-tab-pane  label="列表" name="/console/site/site-list" style="margin-left: -20px;">
                <router-view v-if="activeViewPath=='/console/site/site-list'"></router-view>
            </el-tab-pane>
            <el-tab-pane label="分组" name="/console/site/site-group"  style="margin-left: -20px;max-width: 600px">
                <router-view v-if="activeViewPath=='/console/site/site-group'"></router-view>
            </el-tab-pane>
        </el-tabs>
    </el-container>
</template>

<script>
    export default {
        name: "SiteConsole",
        data(){
            return {
                activeViewPath:this.$route.path
            }
        },
        methods:{
            handleViewChange:function () {
                this.$router.push(this.activeViewPath)
            }
        }
    }
</script>

<style scoped>

</style>

路由代码

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },{
        //一级路由，大页面，控制台
        path: '/console',
        name: 'Console',
        component: Console,
        children:[{
            //二级路由，后面的都可以不用再用/了，依据children关系
            path: 'site-list',
            name: 'SiteList',
            component: SiteList
        },{
            //二级路由，后面的都可以不用再用/了，依据children关系
            path: 'site-group',
            name: 'SiteGroup',
            component: SiteGroup
        }
        ]
    }
]

• 在路由里每次嵌套children的时候就意味着嵌套路由，在第多少层就是多少。在使用ElementUI导航组件的router模式时，对相对路径把握不准的时候就在index里写绝对路径。