vue router 懒加载实现

在vue-cli脚手架中router文件夹中有index.js文件,里面的内容是

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from './HelloWorld'
//import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)


export default new Router({
routes: [].concat(HelloWorld)
})

这里引入的HelloWorld组件不是向以前那么配置是单独在一个js文件中其中内容是,这里的配置都和原来的路径一致,只不过换了一种写法
const HelloWorld = (resolve) => {
import('../components/HelloWorld').then((module) => {
resolve(module)
})
}//通过箭头函数将组件HelloWorld引入最后输出该路由路径
export default
[{
path:'/',
name:"hello",
component:HelloWorld
}]
这样index.js 中routes:采用数组连接concat将HelloWorl.js配置好的路由路径放在空数组中,如果还有其他的路径也采用这个方法,子路由也是和以前的方式配置只要export default配置好的路由数组在
index.js 数组连接concat就可以了。

猜你喜欢

转载自www.cnblogs.com/zhx119/p/9708366.html