VUE通用后台管理系统（二）路由

（代码太多了，只选一些关键的代码贴上去）

一般后台管理系统需要根据身份不同展示不同的菜单

1）还是在data.json中添加菜单信息

 

2)登录成功之后根据你的路由跳转，要提前在src/router/index中定义路由加载的组件

import Vue from 'vue'
import Router from "vue-router";
Vue.use(Router);

import Login from "@/views/Login/login"
import Layout from "@/layout"
import Home from "@/views/Home/index"


const routes = [
  //匹配空路由跳转到登录页
  {
    path: '/',
    redirect: "/login",//重定向
  },

  //登录
  {
    path: '/login',
    name: 'login',
    component: Login,
  },
  //首页
  {
    path: '/layout',
    name: 'layout',
    component: Layout,
    children: [
      {
        path: 'home',
        name: '首页',
        component: Home,
      },
      {
        path: 'home/message',
        name: "消息",
        component: () => import("@/views/Home/message"),
      },
      {
        path: 'home/notice',
        name: '公告',
        component: () => import("@/views/Home/notice"),
      },
      {
        path: 'my',
        name: '个人中心',
        component: () => import("@/views/My/index"),
      },
      {
        path: 'event',
        name: '事件',
        component: () => import("@/views/Event/index"),
      },
      {
        path: 'report/systemReport',
        name: "系统报表",
        component: () => import("@/views/Report/page1"),
      },
      {
        path: 'report/page2',
        name: "二级菜单2",
        component: () => import("@/views/Report/page2"),
      },
      {
        path: 'gameWorld/qAndA',
        name: "快问快答",
        component: () => import("@/views/GameWorld/qAndA"),
      },
      {
        path: 'gameWorld/greedySnake',
        name: "贪吃蛇",
        component: () => import("@/views/GameWorld/greedySnake"),
      },
      {
        path: 'cp/cpInfoQuery',
        name: "CP信息查询",
        component: () => import("@/views/CP/cpInfoQuery"),
      },
      {
        path: 'cp/infoManage',
        name: "产品计费管理",
        component: () => import("@/views/CP/infoManage"),
      }
    ]
  },
  //报表

  //404页面
  {
    path: "*",
    name: "NotFound",
    component: () => import("@/views/error/404.vue"),
  }
]





const router = new Router({
  mode: 'history',
  routes
})
//路由守卫
router.beforeEach((to, from, next) => {

  //用户信息
  const userInfo = localStorage.getItem("userInfo");
  //用户信息存在的情况下禁止跳向登录页
  if (to.path === "/login" && userInfo) return next("/layout/my");

  //如果用户访问登录页，直接放行
  if (to.path === "/login" && !userInfo) return next();


  //没有用户信息，强制跳转到登录页面
  if (!userInfo) return next("/login");




  next();//有用户信息，直接放行
})

export default router

根据自己的需求定义模块，然后再页面上写路由出口，就是路由加载的组件在哪里渲染

在src/layout/index中定义页面

<template>
  <div v-loading="this.$store.state.loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)" style="overflow: hidden;">
    <el-container class="container" style="position: fixed; z-index: 10; width: 100%; background: red;">
      <el-header style="background: #409EFF; ">
        <div class="header">
          <span style="text-align: center; font-size: 14px; line-height: 26px;">
            <span style="font-size: 16px; font-weight: 600; line-height: 34px;">移动高清电视</span>
            <br />
            内容运营管理平台
          </span>
          <div>
            <el-dropdown style="line-height: 60px;">
              <span>你好， {{ this.userInfo ? this.userInfo.userName : "" }}<i
                  class="el-icon-arrow-down el-icon--right"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="editPass">修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="logout"><span>退出登录</span></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
    </el-container>
    <el-container style="margin-top: 63px;">
      <el-aside width="200px"
        style="background-color: rgb(238, 241, 246) ; overflow: hidden ;position: fixed; height: 100%;">
        <el-menu router :default-active="activeIndex">
          <template v-for="item in menuList">

            <el-menu-item v-if="!item.children" :key="item.index" :index="item.index" :name="item.name">
              {{ item.name }}
            </el-menu-item>

            <el-submenu v-else :key="item.index" :index="item.index" :name="item.name">
              <template slot="title">{{ item.name }}</template>
              <template v-for="item2 in item.children">
                <el-menu-item :key="item2.index" :index="item2.index" :name="item2.name">
                  {{ item2.name }}
                </el-menu-item>
              </template> 
            </el-submenu>

          </template>
        </el-menu> 

      </el-aside>
      <el-main style="padding-left: 220px ">
        <el-tabs  v-model="tabsName" closable @tab-remove="handleTabsRemove" @tab-click="handleTabsClick" type="card">
          <el-tab-pane v-for="item in tabsList" :key="item.name" :name="item.path" >
            <span slot="label">{{ item.name }}</span>
          </el-tab-pane>
        </el-tabs>
        <keep-alive include="MyIndex">

          <router-view />
        </keep-alive>

      </el-main>
    </el-container>

    <el-dialog title="修改密码" :visible.sync="editPassState" width="50%">
      <el-form v-loading="editFormLoading" :model="editPassForm" label-width="80px" ref="editPassForm"
        :rules="rules.editPassFormRules">
        <el-form-item class="flex" label="原密码" prop="oldPass">
          <el-input clearable v-model="editPassForm.oldPass" type="password" placeholder="请输入原密码"></el-input>
        </el-form-item>
        <el-form-item class="flex" label="新密码" prop="newPass">
          <el-input clearable v-model="editPassForm.newPass" type="password" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item class="flex" label="确认密码" prop="confirmPass">
          <el-input clearable v-model="editPassForm.confirmPass" type="password" placeholder="确认新密码"></el-input>
        </el-form-item>
        <span style="display: flex; justify-content: space-around;">
          <el-button @click="cancelEditForm">取消</el-button>
          <el-button type="primary" @click="submitEditForm(editPassForm)">确定</el-button>
        </span>
      </el-form>
    </el-dialog>

  </div>
</template>

 <router-view />标签就是切换路由加载不同的组件

这一块代码就是左侧的路由菜单，当然需要提前进行接口请求

现在server中定义接口

 页面请求接口

 

页面效果：

 

点击不同菜单切换路由

    //路由监听事件
    openTabs(e) {
      let tabsList = this.tabsList
      if (!this.tabsList.some(item => item.fullPath == e.fullPath)) {
        tabsList.push(e)
      }
      this.tabsName = e.path
      this.tabsList = tabsList
    },

加一些其他的功能，切换路由，顶部tag标签进行记录保存

//切换tab标签
    handleTabsClick(e) {
      this.$router.push({ path: this.tabsName })
      this.activeIndex = this.$route.path
    },
    //删除标签栏
    handleTabsRemove(e) {
      // 只剩一个tab时不删除
      if (this.tabsList.length == 1) return

      //删除的是否是当前tab
      let item = -1
      if (e == this.tabsName) {
        for (let index in this.tabsList) {
          if (this.tabsList[index].path == e) {
            item = index
          }
        }
      }

      const tabsList = this.tabsList.filter(item => {
        return item.path !== e
      })

      //删除的tab是当前tab,并且不是最后一个
      if (item !== -1 && e !== this.tabsList[this.tabsList.length - 1].path) {
        this.tabsName = tabsList[item].path //切换tab
        this.activeIndex = tabsList[item].path //menu菜单高亮
        this.$router.push(tabsList[item].path) //路由跳转
      }
      //删除的tab是当前tab,并且是最后一个
      if (item !== -1 && e == this.tabsList[this.tabsList.length - 1].path) {
        this.tabsName = tabsList[tabsList.length - 1].path
        this.activeIndex = tabsList[tabsList.length - 1].path
        this.$router.push(tabsList[tabsList.length - 1].path)
      }
      this.tabsList = tabsList
    },

页面tag标签效果