Vue router dynamic routing changes to a blank page after refreshing

vue router adds dynamic route, route jumps normally, and changes to blank page after F5 refresh

sources of topics and their own ideas

related codes

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getToken()) {
    initMenu(router, store)
    if (to.path === "/login") {
      next({ path: "/" })
      NProgress.done() // if current page is dashboard will not trigger    afterEach hook, so manually handle it
    } else {
      next()
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next("/login")
      NProgress.done()
    }
  }
})
 

export const initMenu = (router, store) => {
  if (store.state.security.routes.length > 0) {
    return null
  }
  if (!util.getObjArr("router")) {
    return null
  } else {
    var getRouter = formatRoutes(util.getObjArr("router"))// 
    getRouter.push({ path: "*", redirect: "/404", hidden: true })
    const newRouter = constantRouterMap.concat(getRouter)
    router.addRoutes(newRouter)
    console.log(newRouter)
    store.commit(types.SET_ROUTES, newRouter)
  }
}

export const formatRoutes = (routes) => {
  const fmRoutes = []
  routes.forEach(router => {
    const path = router.path
    let component
    if (router.component === "Layout") {
      component = Layout
    } else {
      component = _import(router.component)
    }
    const name = router.name
    const icon = router.icon
    let children = router.children
    if (children && children instanceof Array) {
      children = formatRoutes(children)
    }
    var fmRouter = {
      path: path,
      component: component,
      name: name,
      // icon: icon,
      meta: { title: name, icon: icon },
      children: children
    }
    fmRoutes.push(fmRouter)
  })
  return fmRoutes
}

what result do you expect? What is the error message actually seen?

export const constantRouter = [ { path: '/login', name: 'login', hidden: true, component: () => import('@/views/login') }, { path:'/home', name:'home', meta:{ title:'list',icon:''}, component: () => import('@/views/home'), }, { path: '/', redirect: '/login', hidden: true } ] export default new Router({ routes: constantRouter }) export const asyncRouter = [ { path: '/page1', component: layout, alwaysShow: true, // will always show the root menu name: 'page1', redirect: '/page1/list', meta:{ title:'list',icon:''}, children: [ { path: 'list', component: () => import('@/views/list'), name:'list', meta:{ title:'list',icon:''}, }, { path: 'edit', component: () => import('@/views/form'), name:'edit', hidden:true, meta:{ title:'edit',icon:''}, }, { path: 'detail', component: () => import('@/views/detail'), name:'detail', hidden:true, meta:{ title:'detail',icon:''}, }, ] }, { path: '/page1', component: layout, name: 'page2', meta:{ title:'list',icon:''}, children: [ { path: '/test', component: () => import('@/views/test'), name:'test', meta:{ title:'test',icon:''}, }, ] }, { path:'*', name:'errorPage404', hidden: true, component: () => import('@/views/404'), } ]

import router from './router' router.beforeEach((to, from, next) => { if(to.path !== '/login'){ if(sessionUtil.getItem('recombineRouters')){ next() }else{ let privileges = ['list','edit']; let permission_routes = routeUtil.GenerateRoutes(privileges); router.addRoutes(permission_routes); console.log(router); next({ ...to, replace: true }) } }else{ next(); } })