vue router 动态路由 刷新后变空白页

Question

vue router 添加动态路由，路由正常跳转，F5刷新后变空白页

题目来源及自己的思路

相关代码

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
}

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

router.addRoutes(newRouter)后需要next({ ...to, replace: true })

Answer 2

我也遇到了相同的问题，登陆成功跳转动态路由页面this.$router.push({path:'/page1/list'})正常，刷新就空白了

在router.js中定义号常规路由和动态路由：

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'),
    }
]

之后在main.js中addRouter：

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();
    }
})

其中过滤动态路由的方法GenerateRoutes：

function GenerateRoutes(privileges){
    var f = item => {
        if(item.path === '*'){
            return true;
        }else{
            if(item.children && item.children.length > 0){
                item.children = item.children.filter(f);
                if(item.children.length>0){
                    item.redirect = item.children[0].path;
                    return true;
                }else{
                    return false;
                }
            }else{
                return (privileges.indexOf(item.name) > -1)
            }
        }
    }

    let accessedRouters = asyncRouter.filter(f);
    let recombineRouters = constantRouter.concat(accessedRouters);
    sessionUtil.setItem('recombineRouters',recombineRouters);
    return accessedRouters;
}

首先，我的*（404）是写在动态路由之后的，其次，addRouter后没有用next(),而是使用 next({ ...to, replace: true })代替，但是还是没有解决问题，我的router是v3.0.1

Answer 3

同样出现这个问题

Answer 4

需要后端支持，官方有说明：
Vue HTML5 History 模式

Answer 5

请问你后来解决了吗

Answer 6

请问你后来解决了吗