Common route writing:

import Home from '@/components/Home'
import Index from '@/components/Index'
import About from '@/components/About'
{
  path: '/home',
  name: 'Home',
  component: Home
}, {
  path: '/index',
  name: 'Index',
  component: Index
}, {
  path: '/about',
  name: 'About',
  component: About
}
Copy the code

The VUE project implements route loading on demand (lazy route loading) in three ways:

1. Vue asynchronous components

/* vue asynchronous components */ {path: '/home', name: 'home', Component: resolve => require(['@/components/ home'],resolve)},{path: '/home', name:' home', component: resolve => require(['@/components/ home'],resolve)},{path: '/index', name: 'Index', component: resolve => require(['@/components/Index'],resolve) },{ path: '/about', name: 'About', component: resolve => require(['@/components/About'], resolve) }Copy the code

2. Use import (es) for lazy routing

// webpackChunkName is not specified, so each component is packaged as a js file const Home = () => import('@/components/Home') const Index = () => import('@/components/Index') const About = () => import('@/components/About') Const Home = () => import(/* webpackChunkName:) const Home = () => import(/* webpackChunkName:) 'importPage' */ '@/components/Home') const Index = () => import(/* webpackChunkName: 'importPage' */ '@/components/Index') const About = () => import(/* webpackChunkName: 'importPage' */ '@/components/About')Copy the code
{
  path: '/home',
  component: Home
}, {
  path: '/index',
  component: Index
}, {
  path: '/about',
  component: About
}
Copy the code

3, the require. Ensure () (webpack)

// Webpack provides require.ensure(), the same webpackChunkName will be merged into a js file {path: '/home', name: 'home', component: r => require.ensure([], () => r(require('@/components/Home')), 'page1') }, { path: '/index', name: 'Index', component: r => require.ensure([], () => r(require('@/components/Index')), 'page1') }, { path: '/about', name: 'About', component: r => require.ensure([], () => r(require('@/components/About')), 'page2') }Copy the code