Vue后台管理系统之动态路由的实现！

Vue作为一种渐进式、自底层向上增量开发的MVVM前端框架！它的语法偏向于结构化、条条框框相对较多，更加的适合偏向于静态业务的后台管理系统。

下面我将带大家了解一下后台管理系统中的动态路由，实现不同身份、不同权限的登陆者，体验对应不同的功能！

 

因为本次主要为大家实现动态路由的思路，就不加后端mock数据了！

项目目录如下:

当普通用户权限用户登录的时候：

实现方法：

1.创建普通用户的路由规则表。

2.当改类型用户登录的时候，将路由规则匹配成普通用户登录规则，实现效果如下：

当管理员用户登录时：

 

1.同样新建管理员路由规则:

 

2.当管理员用户登录时，将路由规则注入到路由表中：

最后一步：需要在公共跳转路由页面配置路由规则：

<!--
 * @Description: 希望KEEP REAL
 * @Version: 版本更新中...
 * @Autor: AKAYangYi
 * @Date: 2020-09-21 22:38:23
 * @LastEditors: YangYi
 * @LastEditTime: 2020-09-22 22:04:53
-->
<template>
  <div>
    <el-row :gutter="24" class="box">
      <el-col :span="5">
        <div class="grid-content bg-purple">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
              >
                <router-link v-for="(item,index) in routes" :key="index" :to="'/index/'+item.path" tag="li">
                  <el-menu-item :index="index+''">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{item.name}}</span>
                  </el-menu-item>
                </router-link>
              </el-menu>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="grid-content bg-purple">
          <router-view></router-view>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "Index",
  data() {
    return {
      routes: "",
    };
  },
  created() {
    this.routes = this.$router.options.routes.find(
      (item) => item.path === "/index"
    ).children;
  },
};
</script>

<style scoped>
.box {
  min-width: 900px;
}
</style>