动态加载router，用Vue+Element UI搭建后台管理系统界面

两个一级菜单，每个一级菜单下对应两个页面，在 router.js 添加代码如下所示。

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'
import PageOne from '@/components/PageOne'
import PageTwo from '@/components/PageTwo'
import PageThree from '@/components/PageThree'
import PageFour from '@/components/PageFour'
Vue.use(Router)
export default new Router({
 mode: 'history',
 routes: [
 {
 path: '/',
 name: '导航1',
 component: Main,
 children:[
 {
 path: '/pageone',
 name: '页面1',
 component: PageOne
 },
 {
 path: '/pagetwo',
 name: '页面2',
 component: PageTwo
 }
 ]
 },
 {
 path: '/navigation',
 name: '导航2',
 component: Main,
 children:[
 {
 path: '/pagethree',
 name: '页面3',
 component: PageThree
 },
 {
 path: '/pagefour',
 name: '页面4', 

 component: PageFour
 }
 ]
 }
 ]
})

其中 Main 是主页面，PageOne、PageTwo 为导航1下属页面，PageThree、PageFour 为导航2下属页面，结构很清晰，一目了然。

接下来在 Main.vue 中动态解析 router，生成菜单，代码如下所示。

<template>
 <el-container>
 <el-aside>
 <el-menu>
 <el-submenu>
 <template>{{item.name}}/<template>
 <el-menu-item>{{item2.name}}/<el-menu-item>
 /<el-submenu>
 /<el-menu>
 /<el-aside>
 /<el-container>
/<template>

通过 v-for 循环遍历 routes，动态生成 <el-submenu> 标签，此为一级菜单，在内部继续用 v-for 循环遍历其 children，动态生成 <el-menu-item> 标签，是二级菜单，给每个标签设置不同的 index 值，否则会导致点击事件错乱，实际运行结果如下图所示。/<el-menu-item>/<el-submenu>

菜单创建成功，接下来完成页面与菜单选项的绑定。

1、<el-menu> 标签添加 router 属性。/<el-menu>

2、在页面添加 <router-view> 标签，它是一个容器，渲染的组件是你当前要跳转的 router。/<router-view>

3、<el-menu-item> 标签的 index 值就是要跳转的页面路径。/<el-menu-item>

根据以上 3 条，修改 Main.vue 代码如下所示。

<template>
 <el-container>
 <el-aside>
 <el-menu>
 <el-submenu>
 <template>{{item.name}}/<template>
 <el-menu-item>{{item2.name}}/<el-menu-item>
 /<el-submenu>
 /<el-menu>
 /<el-aside>
 <el-main>
 <el-breadcrumb>
 <el-breadcrumb-item>首页/<el-breadcrumb-item>
 <el-breadcrumb-item>
 /<el-breadcrumb>
 <router-view>
 /<el-main>
 /<el-container>
/<template>

这样就实现了页面跳转，运行结果如下图所示。

最后一个问题，当我们第一次访问主页面时，右侧的子页面为空，如下图所示。

我们希望默认加载导航1的页面1，如何实现呢？非常简单，给主页面设置重定向即可，修改主页面 router 如下所示。

{
 path: '/',
 name: '导航1',
 component: Main,
 redirect: '/pageone',
 children:[
 {
 path: '/pageone',
 name: '页面1',
 component: PageOne
 },
 {
 path: '/pagetwo',
 name: '页面2',
 component: PageTwo
 }
 ]
}

添加了 redirect: '/pageone'，即加载主页面之后会自动跳转到 /pageone，接下来设置导航1中的页面1选项默认选中，具体实现是在循环中判断系统的 router 是否等于当前页面的 router，成立则设置 class="is-active"，如下所示。

<el-menu-item> :class="$route.path==item2.path?'is-active':''">{{item2.name}}/<el-menu-item>

再次访问 http://localhost:8080，结果如下图所示。

以上就是用 Vue + Element UI 动态搭建后台管理系统界面的步骤，你学会了吗？

关注微信公众号「Java大联盟」，关注即可获取海量学习干货，同时还有不定期送书，键盘，鼠标等粉丝福利。

赶快来关注一波，海量资源拿到手软。