Lazy loading of Vue-router routing components

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
})
  1. 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

clipboard.png

clipboard.png

component: view("Home")Promise
component: () => import("@/views/Button")

clipboard.png

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!

Mar.16,2021

const view = name = > import ('@ / views/$ {name}\') change to const view = name = > () = > import ('@ / views/$ {name}')


For

webpack, you can use the require.context method to automatically route lazy loading.

  

the problem I encountered was using component: () = > import ('@ / views/Home'), which also reported an error. I checked a lot of information, but I didn't see anyone else encounter this kind of problem. Oh, freaking out? Error message: Failed to mount component: template or render function not defined.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3a7e2-2ba6e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3a7e2-2ba6e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?