解析vue路由异步组件和懒加载案例

first<template> <div>我是第一个页面</div> </template> second<template> <div>我是第二个页面</div> </template> three<template> <div>我是第三个页面</div> </template>four<template> <div>我是第四个页面</div> </template>

import Vue from 'vue'import VueRouter from 'vue-router'/*import First from '@/components/First' import Second from '@/components/Second'*/  Vue.use(VueRouter) //方案1const first =()=>import(/* webpackChunkName: "group-foo" */ "../components/first.vue");const second = ()=>import(/* webpackChunkName: "group-foo" */ "../components/second.vue");const three = ()=>import(/* webpackChunkName: "group-fooo" */ "../components/three.vue");const four = ()=>import(/* webpackChunkName: "group-fooo" */ "../components/four.vue");//方案2const first = r => require.ensure([], () => r(require('../components/first.vue')), 'chunkname1')const second = r => require.ensure([], () => r(require('../components/second.vue')), 'chunkname1')const three = r => require.ensure([], () => r(require('../components/three.vue')), 'chunkname2')const four = r => require.ensure([], () => r(require('../components/four.vue')), 'chunkname2') //懒加载路由 const routes = [  {  //当首次进入页面时，页面没有显示任何组件；让页面一加载进来就默认显示first页面  path:'/', //重定向，就是给它重新指定一个方向，加载一个组件；  component:first  },  {  path:'/first',  component:first },  {  path:'/second',  component:second }, {  path:'/three',  component:three },  {  path:'/four',  component:four } //这里require组件路径根据自己的配置引入 ] //最后创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。    const router = new VueRouter({  routes }) export default router;