从零开始，详细讲解根据用户权限不同，动态生成路由导航菜单功能的实现(二)

紧接着上文《从零开始，详细讲解根据用户权限不同，动态生成路由导航菜单功能的实现(一)》所讲。

将路由界面渲染出来

App.vue

<template>
  <transition name="fade">
    <router-view></router-view>
  </transition>
</template>

<script>
  export default {
  }
</script>

<style scoped>
/* Animation
------------------------------ */
.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

建立一个简单的登录界面

login.vue

<template>
  <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
    <el-form-item prop="userName">
      <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="dataFormSubmit()">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      dataForm: {
        userName: "admin",
        password: "admin"
      }
    };
  },
  methods: {
    // 提交表单
    dataFormSubmit() {
      this.axios
        .post("users/v1/login", {
          params: {
            username: this.dataForm.userName,
            password: this.dataForm.password
          }
        })
        .then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              type: "success",
              message: "登录成功!"
            });
            this.$cookie.set("token", data.token);
            this.$router.replace({ name: "home" });
          } else {
            this.$message.error(data.msg);
          }
        });
    }
  }
};
</script>

页面布局

现在我们要考虑一下登录成功后展示的页面的布局，我们就绘制一个简单的布局吧，main.vue为主入口页面，将侧边栏与其他子路由一起包含在里面
如下图所示：

1. 除了全局路由以外,其他的路由界面都将在这个子路由页面处(黑色边框区域)渲染出来
2. 动态路由菜单列表则将在侧边栏区域(蓝色边框区域)渲染出来

现在，让我们按照布局图开始对main.vue、home.vue 、main-sidebar.vue进行编写

main.vue

<template>
  <div class="warp">
    <div class="main-navbar">主入口main.vue</div>
    <el-row class="main">
      <el-col :span="4" class="main-sidebar">
        <main-sidebar />
      </el-col>
      <el-col :span="20" class="router-view">
        <router-view />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import MainSidebar from "./main-sidebar";
export default {
  components: {
    MainSidebar
  }
};
</script>

<style  scoped>
.warp {
  position: relative;
  height: 500px;
  border: 2px solid red;
}
.main-navbar {
  height: 100px;
  width: 100%;
}
.main {
  position: absolute;
  top: 100px;
  bottom: 0px;
  width: 100%;
}
.main-sidebar {
  border: 2px solid blue;
  height: 100%;
  text-align: center;
  /* writing-mode: vertical-lr; */
}
.router-view {
  border: 2px solid black;
  height: 100%;
}
</style>

home.vue

<template>
  <div>
    home.vue
    home.vue
    home.vue
    home.vue
  </div>
</template>

<script>
export default {};
</script>

main-sidebar.vue

<template>
  <div>侧边栏main-sidebar.vue</div>
</template>

<script>
export default {};
</script>

现在我们如果从登录页面登录成功并跳转的话，可以看到下图所示的界面：

并且可以在控制台看到类似于下图的输出信息:

首先对三个page1、page2、page3进行编写

page1.vue

<template>
  <div>
    page1.vue
    page1.vue
    page1.vue
    page1.vue
  </div>
</template>

<script>
export default {};
</script>

page2.vue

<template>
  <div>
    page2.vue
    page2.vue
    page2.vue
    page2.vue
  </div>
</template>

<script>
export default {};
</script>

page3.vue

<template>
  <div>
    page3.vue
    page3.vue
    page3.vue
    page3.vue
  </div>
</template>

<script>
export default {};
</script>

【重点】现在我们该对侧边栏进行动态路由菜单的加载了

修改*main-sidebar.vue*

<template>
  <div>
    <el-menu
    default-active="home"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="home" @click="$router.push({ name: 'home' })">
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item
        :index="item.name"
        v-for="item in menuList"
        :key="item.meta.menuId"
        @click="goToRouter(item.name)"
      >
        <i class="el-icon-location"></i>
        <span slot="title">{{item.meta.title}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList: []
    };
  },
  created() {
    this.menuList = sessionStorage.getItem("dynamicMenuRoutes")
  },
  methods: {
    goToRouter(name) {
      this.$router.push({ name });
    }
  }
};
</script>

现在我们可以看到下图画面:

此时我们去点击不同页面可以到看:



至此，我们就已经实现了动态动态生成路由导航菜单的功能
（大家可以根据这个思路进行改变，只要理解了思路就可以快速的搭建出来了）

可能中间存在许多不足，还请见谅并指出，谢谢