我们知道，大多情况下像我这样的菜鸡做的网站都很小，可以让用户在第一次加载的时候就把所有文件加载完，可总会出现写的网站比较大的情况，每当这个时候，我们就需要“按需加载”，所谓的按需加载就是顾名思义，如果我需要加载一个界面的时候才会加载这个界面的文件（前提是单页应用），好的，废话补多少可废话又说了那么多，直接上代码吧
importVuefrom'vue';
importVueRouterfrom'vue-router';
importAboutPagefrom'../components/Views/AboutPage';
importSelfMainPagefrom'../components/Views/SelfMainPage';
importIndexfrom'../components/Views/Index';
importPassportPagefrom'../components/Views/PassportPage';
importLoginPagefrom'../components/Items/LoginPage';
importRegisterPagefrom'../components/Items/RegisterPage';
importEditPagefrom'../components/Views/EditPage';
importStorefrom'../store';
import{GlobalCommunication}from"../js/GlobalCommunication";
importQAfrom'../components/Views/Q&APage';
Vue.use(VueRouter);
exportconstrouter=newVueRouter({
routes:[
{
name:'index',
path:'/',
component:Index,
meta:{
keepAlive:true,
login_required:false
}
},
{
name:'about',
path:'/about',
component:AboutPage,
meta:{
keepAlive:true,
login_required:false
}
},
{
name:'qa',
path:'/qa',
component:QA,
meta:{
keepAlive:true,
login_required:false
}
},
{
name:'home',
path:'/home',
component:SelfMainPage,
meta:{
keepAlive:true,
login_required:true
}
},
{
name:'passport',
path:'/passport',
component:PassportPage,
meta:{
keepAlive:true,
login_required:false
},
children:[
{
name:'login',
path:'/passport/login',
component:LoginPage,
meta:{
keepAlive:true,
login_required:false
}
},
{
name:'register',
path:'/passport/register',
component:RegisterPage,
meta:{
keepAlive:true,
login_required:false
}
}
]
},
]
}
]
});
好的，这是我们没有使用按需加载时的vue-router文件，又臭又长，webpack一次性打包出来的文件还很大，而且用户在加载的时候要加载一年，对服务器负担还大，总结，我们需要一种可以在用户需要的时候才加载相应文件的方法，上代码
import Vuefrom 'vue';
import VueRouterfrom 'vue-router';
import Storefrom '../store';
import {GlobalCommunication}from "../js/GlobalCommunication";
Vue.use(VueRouter);
export const router =new VueRouter({
routes : [
{
name :'index',
path :'/',
component : resolve => require(['../components/Views/Index.vue'],resolve),
meta : {
keepAlive :true,
login_required :false
}
},
{
name :'about',
path :'/about',
component : resolve => require(['../components/Views/AboutPage.vue'],resolve),
meta : {
keepAlive :true,
login_required :false
}
},
{
name :'qa',
path :'/qa',
component : resolve => require(['../components/Views/Q&APage.vue'],resolve),
meta : {
keepAlive :true,
login_required :false
}
},
{
name :'home',
path :'/home',
component : resolve => require(['../components/Views/SelfMainPage.vue'],resolve),
meta : {
keepAlive :true,
login_required :true
}
},
{
name :'passport',
path :'/passport',
component : resolve => require(['../components/Views/PassportPage.vue'],resolve),
meta : {
keepAlive :true,
login_required :false
},
children: [
{
name :'login',
path :'/passport/login',
component : resolve => require(['../components/Items/LoginPage.vue'],resolve),
meta : {
keepAlive :true,
login_required :false
}
},
{
name :'register',
path :'/passport/register',
component : resolve => require(['../components/Items/RegisterPage.vue'],resolve),
meta : {
keepAlive :true,
login_required :false
}
}
]
},
]
}
]
});
可以看到，我们把一大堆import给删了，取而代之的是
component : resolve => require(['../components/*/*.vue'],resolve),
有一些js基础的同学大概已经看懂啥意思了，我也就不多讲了（怕讲错），总之这就是一种实现按需加载的方法
