vue router 懒加载实现-优快云博客

本文详细介绍了在Vue-cli脚手架中如何使用index.js文件进行路由配置。通过动态导入组件和concat方法，可以灵活地添加和管理路由，适用于单页应用的开发场景。

在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就可以了。

转载于:https://www.cnblogs.com/zhx119/p/9708366.html