router.addRoutes 无效

zhuxiaokang0223 commented 5 years ago

Question（提问）

基于vue-admin-template，使用router.addRoutes动态加载菜单，查看控制台，无报错信息，console.info打印菜单有数据。但是左侧菜单栏没有动态变更。  
请问怎么解决？ 谢过......

Steps to reproduce（问题复现步骤）

Screenshot or Gif（截图或动态图）

Link to minimal reproduction（最小可在线还原demo）

router.beforeEach:

router.beforeEach(async(to, from, next) => {

  NProgress.start()

  document.title = getPageTitle(to.meta.title)
  const hasToken = getToken()
  if (hasToken) {
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else { 
      const hasGetUserInfo = store.getters.name   
      const menuList = store.getters.routes && store.getters.routes.length > 0 
      if (hasGetUserInfo && menuList) {
        next()
      } else {
        try { 
          // 获取用户信息
          await store.dispatch('user/getInfo')
          // 动态菜单
          const accessRoutes = await store.dispatch('permission/generateRoutes')
         // 这里打印到控制台，是有数据的
          console.info(accessRoutes)
          router.addRoutes(accessRoutes)

          next({ ...to, replace: true }) 
        } catch (error) {
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})
router.afterEach(() => {
  // 完成进度条
  NProgress.done()
})

动态菜单测试代码：


import {constantRoutes } from '@/router'

import Layout from '@/layout'

const state = {
    routes: [],
    addRoutes: []
  }

const mutations = {
    SET_ROUTES: (state, routes) => {
      state.addRoutes = routes
      state.routes = constantRoutes.concat(routes)
    }
  }

const actions = {
    generateRoutes({ commit }) {
      return new Promise(resolve => {
        let accessedRoutes = formatRoutes

        commit('SET_ROUTES', accessedRoutes)
        resolve(accessedRoutes) 
      })
    }
  }

export const formatRoutes =  [
    {
      path: '/ccc',
      component: Layout,
      children: [
        {
          path: 'ccc',
          name: 'ccc',
          component: () => import('@/views/form/index'),
          meta: { title: 'ffff', icon: 'form' }
        }
      ]
    },
    { path: '*', redirect: '/404', hidden: true }
  ]

  export default {
    namespaced: true, 
    state,
    mutations,
    actions
  }

Other relevant information（格外信息）

Your OS: win10
Node.js version: 10.15.0
vue-element-admin version: 4.2.1

wangyegg1989 commented 5 years ago

getMenuList().then(res => { accessedRouters = convertRouter(res.data.menuLeftTree) store.dispatch('permission/generateRoutes', accessedRouters).then(result => { router.addRoutes(result) }) })