Vue-router addRoutes添加路由后还是跳转404

Question

router.js

export const constantRoutes: RouteConfig[] = [
  {
    path: '/login',
    component: () => import(/* webpackChunkName: "login" */ '@/views/common/login.vue'),
    meta: { hidden: true }
  },
  {
    path: '/404',
    component: () => import(/* webpackChunkName: "404" */ '@/views/common/404.vue'),
    meta: { hidden: true }
  },
  {
    path: '/',
    component: Layout,
    redirect: '/home',
    children: [
      {
        path: 'home',
        component: () => import('@/views/common/home.vue'),
        name: 'Home',
        meta: { title: 'home', icon: 'nav-home' }
      }
    ]
  },
  { path: '*', redirect: '/404', meta: { hidden: true } }
]

路由全局拦截

import consumeRoutes from './router/consume'
router.beforeEach(async(to: Route, from: Route, next: any) => {
  NProgress.start()
  if (getToken()) {
    if (AppModule.appList.length === 0) {
      router.addRoutes(consumeRoutes);
      console.log('router', router)
      next()
    } else {
      next()
    }
  } else {
    // Has no token
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

上面用到的动态加载的路由配置consume

import { RouteConfig } from 'vue-router'
import Layout from '@/layout/index.vue'

const consumeRoutes: RouteConfig[] = [
  {
    path: '/device',
    component: Layout,
    redirect: '/list',
    children: [
      {
        path: 'list',
        component: () => import('@/views/consume/device/index.vue'),
        name: 'Device',
        meta: { title: 'device', icon: 'nav-deviceManage' }
      }
    ]
  }
]

export default consumeRoutes

全局拦截已经动态addRoutes添加了/device/list这个路由地址，但是页面刷新的时候，还是会跳转到404页面。
求指教啊

Answer 1

consumeRoutes里面path: '/device'重定向到/list里了，而/list这个路径没有匹配到，所以仍然跳到404页面。
补充。
当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。