关于vue-rouer addRoutes问题

Question

main.js:

import Vue from 'vue'
import App from './App.vue'
import router, { initLayout } from './router'
import store from './store'

require('../mock/index')

Vue.config.productionTip = false
initLayout()
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

router.js

export async function initLayout () {
  await axios.get('http://localhost/layout').then((res) => {
    let path = '@' + res.data[0].component
    // res.data[0].component = () => import(path)
    res.data[0].component = Promise.resolve(import(path))
    router.addRoutes([...res.data])
  })
}

mock.js

export default Mock.mock('http://localhost/layout', [{
  path: '/about',
  name: 'About',
  // route level code-splitting
  // this generates a separate chunk (about.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  component: '/views/About.vue'
}])

mock.js文件拦截了对于http://localhost/layout的请求，在main.js执行initLayout时，获取到了对应路由然后import在addRoutes。

为什么浏览器会提示 Error: Cannot find module '@/views/About.vue'

这个怎么解决啊???

Answer 1

你这写法很迷幻呀
按你的逻辑这样应该就可以了

router.js

export function initLayout () {
  return axios.get('http://localhost/layout').then((res) => {
    let path = '@' + res.data[0].component
    // res.data[0].component = () => import(path)
    res.data[0].component = Promise.resolve(import(path))
    router.addRoutes([...res.data])
  })
}

main.js

initLayout().then(() => {
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
})

Answer 2

component: () => import(path)