about lazy loading of the routing component of vue-router
import Vue from "vue"
import Router from "vue-router"
const page404 = () => import("@/views/404")
// const view = name => import(`@/views/${name}`)
Vue.use(Router)
const constantRoutes = [
{
path: "/",
name: "",
component: () => import("@/views/Home"), // working
// component: view("Home"), do not working
icon: "iconfont icon-home1"
},
{
path: "*",
name: "404",
component: page404
}
]
export default new Router({
mode: "history",
linkActiveClass: "active",
routes: constantRoutes
})
- I use
const page404 = () => import("@/views/404")
{
path: "*",
name: "404",
component: page404
}there is no problem with lazy loading in this way
but this makes it unscientific to load more components, because a lot of the same code will be written
then I thought of writing a method to lazily load the required components
const view = name => import(`@/views/${name}`)
{
path: "/",
name: "",
component: view("Home"),
}I thought I could load the component by calling the view ("component name") method, but I found that I made an error
component: view("Home")Promise
component: () => import("@/views/Button")
take a closer look at the component I need in the _ ctor [0] .component of this promise object, but in fact I don"t know how to get this component?
tried component: view ("Home"). Then (res = > res.data),
the result is still the same error report, there is no clue at present, ask for advice!