Vue2.0 + ElementUI 手写权限管理系统后台模板（三）——页面搭建

框架布局

本章只介绍基础布局，和一些主要的js，页面上基本上都是些交互事件，项目代码上都有注释，不懂的地方debug跑一变就知道了，只是这些事件基本上没有独立存在的，相互之间都有关联

框架风格

新建页面：/src/views/layout/layout.vue

aside 无限级菜单组件

新建页面：/src/views/layout/aside/aside.vue

点击菜单

// aside.vue
watch: {
      // 监听浏览器直接输入路由，将此路由添加到tabnavBox
      '$route.path': function (val) {
        this.selectmenu(val)
      }
    },
    
// 点击菜单把当前菜单的name和path添加到tabNavBox容器，生成tabNav标签页菜单
selectmenu (key) {
        // 获取当前权限路由表
        let router = this.$store.getters.routers
        let name = ''
        // 查找路由的name属性
        let navTitle = function (path, routerARR) {
          for (let i = 0; i < routerARR.length; i++) {
            if (routerARR[i].children.length > 0 || routerARR[i].path === path) {
              if (routerARR[i].path === path && routerARR[i].children.length < 1) {
                name = routerARR[i].name
                break
              }
              // 递归查找
              navTitle(path, routerARR[i].children)
            }
          }
          return name
        }
        // tabNavBox添加数据
        this.$store.dispatch('addTab', {
          title: navTitle(key, router),
          path: key
        })
      }

子菜单组件 menu-true

新建页面：/src/views/layout/aside/menuTree.vue

header头部

这里没啥好说的，都是html布局，tabnav接下来说， i18n后面会讲

新建页面：/src/views/layout/header/header.vue

tabNav 组件

这里的tabNav标签动画和页面的动画是一样的,都是官方的demo稍微改一下，，只不过页面有mode="out-in"所以动画时间需要快一点

新建页面：/src/views/layout/header/tabNav.vue

系列文章

Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述

Vue2.0 + ElementUI 手写权限管理系统后台模板（二）——权限管理

Vue2.0 + ElementUI 手写权限管理系统后台模板（三）——页面搭建

Vue2.0 + ElementUI 手写权限管理系统后台模板（四）——组件结尾