Solve the problem that vue single page application enters the page and loads all js

1 is generally introduced in index. js in this way

import from '@/pages/my'
import Cart from '@/pages/cart'
import Order from '@/pages/order'
import TMap from '@/pages/map'
import New from '@/pages/new'

It would be nice to change it to this way

const My = r => require.ensure([], () => r(require('@/pages/my')), 'my')
const Cart = r => require.ensure([], () => r(require('@/pages/cart')), 'cart')
const Order = r => require.ensure([], () => r(require('@/pages/order')), 'order')
const TMap = r => require.ensure([], () => r(require('@/pages/map')), 'map')
const New = r => require.ensure([], () => r(require('@/pages/new')), 'new')

Additional knowledge: vue--router routing jump error, NavigationDuplicated

vue-router ≥ version 3.0 callback form and changed to promise api form, returning 1 promise. If the routing address jumps are the same and no error is caught, the console will always appear as shown in the figure (Note: the following warnings will not appear in versions below 3.0!!!, due to routing callback problems...)

Option 1:

Install vue-router3.0: Uninstall npm install @ vue-router2.8. 0-S

Option 2:

Add catch catch 1 exception for addresses with the same routing jump: this. $router. push ('/location'). catch (err = > { console.log(err) })

Option 3:

Register 1 global function under main. js

import Router from 'vue-router'

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}

Note: The new version of the official vue-router routing default callback returns promise, the original version of the routing callback will be discarded! ! ! !