vue的动态路由，防止addRoutes无限添加，以及F5刷新不消失，第一次加载不消失

一 login.vue

  // 用户登录
    handleLogin(nameForm) {
      this.$refs[nameForm].validate(valid => {
        // 数据传递的规则验证
        if (valid) {
          let smt= dataRoutes;
          // const _this=this;
          // const data={
          //   username:this.loginInfo.username,
          //   password:this.loginInfo.password
          // };
          // console.log(data)
          login(this.loginInfo).then(res=>{
            console.log(res,'123','res')
            if(res.jwtToken) {
              setToken(res.jwtToken)
              setID(res.result.id)
              sessionStorage.setItem("router", res.result.role);
              this.$store.commit('SET_ID','');
              //  console.log(this.$store.state.user.id,'id')
              this.$router.push("/education")
            }


          }).catch(err=>{
            console.log('1234',err)
          })
        } else {
          return false
        }
      })
    },


二  auth.js
import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'
const Setid = ''
export function getToken () {
  return Cookies.get(TokenKey)
}

export function setToken (token) {
  return Cookies.set(TokenKey, token)
}

export function setID (id) {
  return Cookies.set(Setid, id)
}
export function getID () {
  return Cookies.get(Setid)
}
export function removeToken () {
  return Cookies.remove(TokenKey)
}

export function getLocalStoragePcode () {
  return localStorage.pcode
}

export function setLocalStoragePcode (pcode) {
  return (localStorage.pcode = pcode)
}

export function getLocalStorageTcode () {
  return localStorage.tcode
}

export function setLocalStorageTcode (tcode) {
  return (localStorage.tcode = tcode)
}

三 store中的user.js
// import { login, getInfo } from '@/api/login'
import { getToken, getID, removeToken } from '@/utils/auth'

const user = {
  state: {
    token: getToken(),
    name: '',
    avatar: '',
    roles: [],
    id: null,
    userID: getID()
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_NAME: (state, name) => {
      state.name = name
    },
    SET_AVATAR: (state, avatar) => {
      state.avatar = avatar
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    },
    SET_ID: (state, id) => {
      state.id = id
    }
  },

  actions: {
    Change ({ commit }, id) {
      commit('SET_ID', id)
    },
    // 登录
    Login ({ commit }, userInfo) {
      // const username = userInfo.username.trim()
      return new Promise((resolve, reject) => {
        // login(username, userInfo.password).then(response => {
        //   const data = response.data
        //   console.log(response, data, 'response')
        //   // alert(response.data)
        //   // data.token ='123456'
        //   var token = '123456'
        //   setToken(token)
        //   commit('SET_TOKEN', token)
        //   resolve()
        // }).catch(error => {
        //   reject(error)
        // })
      })
    },

    // 获取用户信息
    GetInfo ({ commit, state }) {
      return new Promise((resolve, reject) => {
        // getInfo(state.token).then(response => {
        //   const data = response.data
        //   commit('SET_ROLES', data.roles)
        //   commit('SET_NAME', data.name)
        //   commit('SET_AVATAR', data.avatar)
        //   resolve(response)
        // }).catch(error => {
        //   reject(error)
        // })
      })
    },

    // 登出
    LogOut ({ commit, state }) {
      return new Promise((resolve, reject) => {
        commit('SET_TOKEN', '')
        commit('SET_ROLES', [])
        removeToken()
        resolve()
      })
    },

    // 前端 登出
    FedLogOut ({ commit }) {
      return new Promise(resolve => {
        commit('SET_TOKEN', '')
        removeToken()
        resolve()
      })
    }
  }
}

export default user

四 premisssion.js
// 路由拦截
// import router from './index'
import { staticRoutes, dataRoutes } from './index'
import store from '../store'
import {
  getToken
} from '@/utils/auth' // 验权
import 'nprogress/nprogress.css' // 进度条
import NProgress from 'nprogress' // 进度调样式
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
let router = new Router({ routes: staticRoutes })
NProgress.configure({
  showSpinner: false
})
router.beforeEach((to, from, next) => {
  NProgress.start()
  store.commit('CHANGE_TITLE', to.meta.title)
  console.log(1)
  if (getToken()) {
    // 在token存在时在进行加载下秒的内容，不能用store.state.user.token因为他回去请求getToken(),
    // 由于加载的时间限制会导致store.state.user.token为空，进而导致走else的内容，使第一次动态加载为空，导致第二次刷新才能解决
    if (to.path === '/login') {
      next()
    } else {
      // next()
      console.log(2)
      if (!store.state.user.id) { // 当id为空时进行加载，也有预防刷新消失的功能
        // 只能运行一次
        store.dispatch('Change', 'qwe') // 改变id使以后不在加载
        console.log(3)
        dataRoutes.map(function (value) {
          if (value.role === sessionStorage.getItem('router')) {
            router.addRoutes(value.roleRoutes)
            next({ ...to, replace: true })
          }
        })
        console.log(4)
      } else {
        console.log(5)
        console.log(getToken(), router)
        next()
      }
    }
  } else {
    console.log(6)
    next()
    // router.push({path:'/login'})
    NProgress.done()
  }

  // if (to.matched.some(res => res.meta.requireAuth)) { // 判断是否需要登录权限
  //   if (getToken()) { // 判断token是否存在
  //     next()
  //   } else {
  //     router.push({
  //       path: '/login'
  //     })
  //   }
  // } else if (to.path === '/login') {
  //   next()
  // } else {
  //   next()
  //   NProgress.done()
  // }
})

router.afterEach(() => {
  NProgress.done()
})

export default router

五 aside.vue
<template>
  <div>
    <el-menu class="menulist" text-color="#303133"
    router :default-active="this.$route.path"
        active-text-color="#ffd04b" @select="handselect">
       <el-submenu
              :index="((index + 1) + '')"
              v-for='(item, index) in routerlist'
              :key='index'
            >
              <template slot='title' >
                <i class='iconfont' :class='item.meta.icon'></i>
                {{item.meta.title}}
              </template>
               <!-- <template slot='title' v-else>

                <router-link :to='{ path: item.path }' tag="div"><i class='iconfont' :class='item.meta.icon'></i> {{item.meta.title}}</router-link>
              </template> -->

              <el-menu-item-group >
                <el-menu-item
                  :index='lastItem.path'
                  v-for='(lastItem, key) in item.children'
                  :key='key'
                  v-show="lastItem.meta.hidden"
                >
                 <span class='not-allowed'><i class='iconfont' :class='lastItem.meta.icon'></i>{{ lastItem.meta.title }}</span>
                  <!-- <router-link
                    v-if='lastItem.meta.disabled === false'
                    :to='{ path: lastItem.path }'
                  >
                    <i class='iconfont' :class='lastItem.meta.icon'></i>{{ lastItem.meta.title }}
                  </router-link>
                  <span v-else class='not-allowed'><i class='iconfont' :class='lastItem.meta.icon'></i>{{ lastItem.meta.title }}</span> -->
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import {dataRoutes } from '@/router/index'
export default {
  data() {
    return {
      routerlist:[]
    };
  },
  created () {
    if(sessionStorage.getItem('router')){
      const _this=this;
       dataRoutes.map(function(value){
            if(value.role===sessionStorage.getItem('router')){
              _this.routerlist= value.roleRoutes[0].children;
            }
          })
    }
  },
  methods:{
    // handleOpen(key, keyPath) {
    //   console.log(key, keyPath);
    //   console.log(1);
    // },
    // handleClose(key, keyPath) {
    //   console.log(key, keyPath);
    //   console.log(2);
    // },
    handselect(key, keyPath){
      // let router = {'key': key}
      // this.$store.commit('SET_ROUTERS', router);
      // console.log(this.$store.state.mad.routers,'123');
      // this.$router.push(key);
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  text-align: center;
  height: 60px;
  line-height: 60px;
  background-color: #f4f4f4;
  color: #cffcff;
  font-size: 18px;
}
.menulist{
  min-height:800px;
}
</style>