vue-element-admin中動態路由404頁面的問題。

注意：需要在請求 路由接口之后，把跳轉404的頁面拼接到路由數組后

// router/index.js
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
]

// 404 page must be placed at the end !!!
export const otherRoutes = [{ path: '*', redirect: '/404', hidden: true }]

vuex配置中

// store/modules/permission.js 
const mutations = {
  SET_ROUTES: (state, routes) => {
/*
routes -> 接口中返回的數據
state.addRoutes -> 動態路由 + 404頁面
state.routes -> 靜態路由 + 動態路由 + 404頁面

*/
    state.addRoutes = routes.concat(otherRoutes)
    state.routes = constantRoutes.concat(routes).concat(otherRoutes)
  }
}

const actions = {
  generateRoutes({ commit }) {
    return new Promise(resolve => {
      request('/routers') -> (res){
          res.data.routers
      }
    })
  }
}

導航守衛中

if ('第一次訪問ip時') {

  await store.dispatch('permission/generateRoutes')


}