问题
路由如何按需加载?
解决
以下即为路由按需加载的核心代码:
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选项中,我们不用先引用组件模板,而是直接使用请求的方式,按需加载进来。