router.addRoutes的时候，能加载数据，但是一点路由跳转，内存就爆了，如下图和代码

Question

问题

1. 想做一个登录后，动态加载路由的功能，但是router.addRoutes的时候，能加载数据，
2. 一点路由跳转，跳转不过云，内存一直在增加，卡到爆,
3. warming说路由重复，但是并没有
4. router.beforeEach中的next()和next({...to})有什么区别

vuex中的路由信息

操作流程

代码

vuex.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        user: sessionStorage.getItem('USER'), //用户
        routers: [] //路由
    },
    mutations: {
        SET_USER(state, params) {
            state.user = params
        },
        set_ROUTERS(state, params) {
            state.routers = params
        }
    },
    actions: {
        //登录
        login({ commit }, param) {
            return new Promise((resolve, reject) => {
                commit('SET_USER', param)
                sessionStorage.setItem('USER', param)
                resolve({ code: 200 })
            }).catch(err => {
                reject(err)
            })
        },
        //增加路由
        addRouter({ commit }, param) {
            return new Promise((resolve, reject) => {
                commit('set_ROUTERS', param)
                resolve({ code: 200 })
            }).catch(err => {
                reject(err)
            })
        },
        //退出
        logout({ commit }, param) {
            return new Promise((resolve, reject) => {
                commit('SET_USER', '')
                commit('set_ROUTERS', '')
                location.reload();
                sessionStorage.removeItem('USER')
                resolve({ code: 200 })
            }).catch(err => {
                reject(err)
            })
        },
    }
})


export default store

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/index'
import Login from '@/components/login'
import About from '@/components/about'

Vue.use(Router)

// 默认路由
export default new Router({
    routes: [{
        path: '/login',
        name: 'Login',
        component: Login
    }]
})

//要增加的路由
export const routers = [{
        path: '/',
        name: 'Index',
        component: Index,
    },
    {
        path: '/about',
        name: 'About',
        component: About
    }
]

main.js

import { routers } from './router'

router.beforeEach((to, from, next) => {
        if (store.state.user) {
            store.dispatch('addRouter', routers).then(res => {
                router.addRoutes(routers)
                console.log('addrouter success')
                    // next({...to })
                next()
            }).catch(() => {
                next('/login')
            })
        } else {
            if (to.path == '/login') {
                next()
            } else {
                next('/login')
            }
        }
    })

login.vue

    login(){
      let data = {
        username:this.username,
        password:this.password
      }
      this.$store.dispatch('login',data).then(res => {
        this.$router.push({path:'/'})
      })
    }

index.vue

    routers:{{$store.state.routers}}
    <div>
        <ul>
          <li v-for="item in routers" :key="item.id">
            <router-link :to="item.path">{{item.name}}</router-link>
          </li>
        </ul>
    </div>
      computed:{
    routers(){
      return this.$store.state.routers
    }
  },
  methods:{
    logout(){
      this.$store.dispatch('logout').then(() => {
        this.$router.push({path:'/login'})
      }).catch(err => {
        console.log(err)
      })
    }
  }

Answer 1

感觉你这种就是beforeEach那里有问题，死循环了

Answer 2

添加路由的事件不能写在beforeEach里面，这样会造成多次添加。
建议写在login方法中
然后vuex的action本身就是一个Promise 不需要你再自己写Promise
你add的router在缓存中，你每次切换页面都add了路由，因此你会有警报重复
另外...是es6中的扩展运算符 将数组或者类数组转义成一个逗号分隔的对象 数组扩展 阮一峰

Answer 3

你在beforeEach的判断有问题， 把 if (store.state.user) 改成 if (store.state.user==' ') 满足才添加动态路由，否则会造成死循环

 if (store.state.user) {
            store.dispatch('addRouter', routers).then(res => {
                router.addRoutes(routers)
                console.log('addrouter success')
                    // next({...to })
                next()
            }).catch(() => {
                next('/login')
            })