被vue-router之router.addRoute 卡了两天

bd0b190a41c3ef9e7adbe98ebdc8e80.png
6c23334a4b1948bf4a47e44d84dc742.png
20c50f6e8aa977ffb34c9406ed23f78.png
f8baf298f8ebe3db3af69e46eeb2905.png
468b3319526ba672942b4168a237628.png
c699eaea26391a3d48eba81508c144c.png
image.png
image.png
动态路由里，将component字符串改变为路由懒加载方法

---

export default {
  LogisticsAuthView: 'views/logistics/logisticsAuth/index',
  AddrManageView: 'views/logistics/addrManage/index',
  FeeTemplateView: 'views/logistics/feeTemplate/index'
}

function loadPageByRoutes (viewPath) {
  const str = constantRouterComponents[viewPath]
  console.log(str)
  return function (resolve) {
    require([`@/${str}.vue`], resolve)
  }
}

• 错误写法：(看着一样，就是报错，一定要以@ + 路径名 + .vue格式)

export default {
  LogisticsAuthView: '@/views/logistics/logisticsAuth/index.vue',
  AddrManageView: '@/views/logistics/addrManage/index.vue', 
  FeeTemplateView: '@/views/logistics/feeTemplate/index.vue'
}

function loadPageByRoutes (viewPath) {
  const str = constantRouterComponents[viewPath]
  console.log(str)
  return function (resolve) {
    require([`${str}`], resolve)
  }
}

const routeArr = [
          {
            // 物流
            path: '/logistics',
            component: resolve => require(['@/layouts/RouteView'], resolve),
            redirect: '/logistics/logistics-auth',
            name: 'Logistics',
            meta: { title: '物流', icon: 'transaction', keepAlive: true },
            hidden: false,
            children: [
              {
                path: '/logistics/logistics-auth',
                redirect: '',
                component: resolve => require(['@/views/logistics/addrManage'], resolve),
                name: 'LogisticsAuth',
                meta: { title: '物流授权', icon: 'transaction', keepAlive: true },
                hidden: false,
                children: null
              },
              {
                path: '/logistics/addr-manage',
                redirect: '',
                component: resolve => require(['@/views/logistics/logisticsAuth'], resolve),
                name: 'AddrManage',
                meta: { title: '地址管理', icon: 'transaction', keepAlive: true },
                hidden: false,
                children: null
              },
              {
                path: '/logistics/fee-template',
                redirect: '',
                component: resolve => require(['@/views/logistics/feeTemplate'], resolve),
                name: 'FeeTemplate',
                meta: { title: '运费模板', icon: 'transaction', keepAlive: true },
                hidden: false,
                children: null
              }
            ]
          }
        ]

this.$router.addRoute(...routeArr)

---

const routeObj = {
          path: '/logistics/addr-manage',
          name: 'AddrManage',
          redirect: '',
          meta: { title: '地址管理', icon: 'transaction', keepAlive: true },
          component: resolve => require(['@/views/logistics/logisticsAuth'], resolve), // import('../test/test.vue') resolve => require(['@/views/logistics/logisticsAuth'], resolve)
          hidden: false,
          children: null
        }

this.$router.addRoute(routeObj)