为什么我不能在 Vue Router 4 的路由中使用异步组件？

Question

The documentation at https://next.router.vuejs.org/guide/advanced/lazy-loading.html says: "Do not use Async components for routes." Why not? I want to do that and I have been doing that in the past.

It actually worked with Vue 3.0.11 and Vue Router 4.0.6, but it does not work with Vue 3.2.9 and Vue Router 4.0.11. I used to be able to pass props through the router view like this: <router-view:device="device"></router-view> but not anymore. What could be a work-around?

Answer 1

By Do not use Async components Router documentation says do not use Vue 3 async components as described in Vue 3 documentation

Do not:

import { defineAsyncComponent  } from "vue"

const UserDetails = defineAsyncComponent (() => import('./views/UserDetails'))

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

Do: (...well as you did before Vue 3)

const UserDetails = () => import('./views/UserDetails')

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

More info in Migration Guide