Vue-router: Questions about vue-rouer addRoutes

[z-pw]

Version

3.4.3

Reproduction link

https://codepen.io/z-pw/project/editor/ZjLeon

Steps to reproduce

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

What is expected?

When entering the homepage, automatically load components through addRoutes
进入主页时，通过addRoutes自动加载组件到vue。

What is actually happening?

Cannot find module '@/views/About.vue'

[posva]

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.