『解疑』在vue中路由如何按需加载

问题

路由如何按需加载？

解决

以下即为路由按需加载的核心代码：

resolve => require(['此处填写需要按需加载的组件路径'],resolve)

具体使用

1.找到项目中router文件夹里的index.js文件（router文件夹在src里）

2.我们没有按需加载的路由是这样写的：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件

Vue.use(Router)

export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: Hello   //对应的组件模板
    }
  ]
})

3.使用按需加载的路由是这样写的：

import Vue from 'vue'
import Router from 'vue-router'
//import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件

Vue.use(Router)

export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: resolve => require(['@/components/Hello'],resolve)//对应的组件模板
    }
  ]
})

总结

看完具体解决方法之后，你会发现不同之处就是在配路由的component选项中，我们不用先引用组件模板，而是直接使用请求的方式，按需加载进来。