002------------将vue+element+admin本地路由，修改为动态路由(学习篇)

1、新建模块页面，添加模块页的路由，完成模块页的页面和对应的点击事件。

vue+element+admin后台项目的克隆和运行，我就不说了，下面是对运行起来的项目进行修改。
<1>首先在src/views下新建一个cache文件，里面建一个index.vue文件。这里，文件夹和文件名字自己想改成啥都行。

<2>添加cache/index.vue的路由，这个页面就是模块页

<3>路由添加好后，完成index.vue页面。说明：data中的数据，title是模块名称，id是绑定在key上的，color是背景颜色。

<template>
  <div class="index">
    <div class="logout">
      <el-button type="danger" @click="handelLogout">退出登录</el-button>
    </div>
    <div class="index_box">
      <ul>
        <li v-for="item in indexArray" :key="item.id" :style="{background:item.color}" @click="handeClickName(item)">{{item.title}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { setNickName } from "@/utils/auth";
export default {
  data() {
    return {
      indexArray: [
        {
          title: '组件系统',
          id: 'AAA',
          color: 'red'
        },
        {
          title: '图表系统',
          id: 'BBB',
          color: 'yellow'
        },
        {
          title: '表格系统',
          id: 'CCC',
          color: 'pink'
        },
        {
          title: '多级路由',
          id: 'DDD',
          color: 'green'
        }
      ]
    }
  },
  methods: {
    // 退出登录
    async handelLogout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    // 点击模块名称
    handeClickName(List) {
      // 点击将名称保存到cooike中
      setNickName(List.title);
      //存储后跳转到首页
      this.$router.push("/");
      // 调用全局挂载的方法,关闭所有标签页
      this.$store.dispatch("tagsView/delAllViews", null, { root: true });
    }
  }
}
</script>

<style scoped>
ul,
li {
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}
ul {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  color: #fff;
  font-size: 32px;
  font-weight: 500;
  position: fixed;
  top: calc(50% - 75px);
  left: calc(50% - 600px);
}
li {
  width: 300px;
  height: 150px;
  line-height: 150px;
  cursor: pointer;
}
.index {
  width: 100%;
  height: 100%;
  background: #0a8ddf;
}
.logout .el-button {
  position: fixed;
  top: 20px;
  right: 50px;
}
</style>

点击模块名称事件handeClickName，中有一个cooike存储。在src/utils/auth.js文件中，使用cookie存储。不会写的照猫画虎，照着token存储的写。

为什么要调用全局挂载的方法,关闭所有标签页，因为不清空上面这些标签，你点击其它模块，再次进入后，路由虽然修改了，但是上面的标签还存在。

跳转到首页，是下图这个页面，每个模块中都有这个页面，为共用页面。