vue: 懒加载机制

src/router/index.js

@@ -1,15 +1,17 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Login from '@/views/Login.vue'
+/*import Login from '@/views/Login.vue'
 import Home from '@/views/Home.vue'
+
 import Welcome from '@/views/Welcome.vue'
- 
- 
+
+
 
 import FeedProcess from '@/views/dataStatistics/FeedProcess.vue'
 import WeightTrend from '@/views/dataStatistics/WeightTrend.vue'
 import FormulaEffect from '@/views/dataStatistics/FormulaEffect.vue'
 import GrowthRate from '@/views/dataStatistics/GrowthRate.vue'
+import GrowthRate from '@/views/dataStatistics/GrowthRate.vue'
 import FeedCost from '@/views/dataStatistics/FeedCost.vue'
 import DiseaseSituation from '@/views/dataStatistics/DiseaseSituation.vue'
 import SurvivalRate from '@/views/dataStatistics/SurvivalRate.vue'
@@ -44,7 +46,7 @@ import FeedCostSet from '@/views/basicSettings/FeedCostSet.vue'
 
 import User from '@/views/systemManagement/User.vue'
 import Role from '@/views/systemManagement/Role.vue'
-
+*/
 
 Vue.use(Router)
 
@@ -54,63 +56,43 @@ const router =  new Router({
     // 当路径为/,重定向路径到/login
     { path: '/', redirect: '/login' },
     // 当路径为/login,转到组件Login
-    { path: '/login', component: Login },
-    { 
-      path: '/home', 
-      component: Home,
+    { path: '/login', component: () =>import('../views/Login.vue') },
+    {
+      path: '/home',
+      component: () => import('../views/Home.vue'),
       // 当路径为/home,转到组件welcome
       redirect: '/welcome',
       //children里面放的是home组件下的子组件
       children:[
-        { path: '/welcome', component: Welcome },
-         
-        
-
- 
-  
-        { path: '/FeedProcess', component: FeedProcess },
-        { path: '/WeightTrend', component: WeightTrend },
-        { path: '/FormulaEffect', component: FormulaEffect },
-        { path: '/GrowthRate', component: GrowthRate },
-        { path: '/FeedCost', component: FeedCost },
-        { path: '/DiseaseSituation', component: DiseaseSituation },
-        { path: '/SurvivalRate', component: SurvivalRate },
-
-        { path: '/WeightRecord', component: WeightRecord },
-        { path: '/CowInfo', component: CowInfo },
-        { path: '/EventRecord', component: EventRecord },
-        
-        
-
-        { path: '/CowCowShed', component: CowCowShed },
-        { path: '/CowShedGroup', component: CowShedGroup },
-
-        { path: '/FeedPlan', component: FeedPlan },
-        { path: '/FormulaTemplate', component: FormulaTemplate },
-
-        { path: '/WorkTaskAssign', component: WorkTaskAssign },
-        { path: '/WorkTaskImplement', component: WorkTaskImplement },
-        
-
-        { path: '/CalfType', component: CalfType },
-        { path: '/WorkOrderType', component: WorkOrderType },
-        { path: '/FeedCarManagement', component: FeedCarManagement },
-        { path: '/DiseaseManagement', component: DiseaseManagement },
-        { path: '/InfoRemind', component: InfoRemind },
-        { path: '/DiseaseType', component: DiseaseType },
-        { path: '/FeedTemplate', component: FeedTemplate },
-        { path: '/DefaultPara', component: DefaultPara },
-        { path: '/FeedCostSet', component: FeedCostSet },
-
-  
-        { path: '/User', component: User },
-        { path: '/Role', component: Role },
-        
-
- 
- 
-        
-      ] 
+        { path: '/welcome', component: ()=> import('../views/Welcome.vue') },
+        { path: '/FeedProcess', component: ()=> import('../views/dataStatistics/FeedProcess.vue') },
+        { path: '/WeightTrend', component:() =>import('../views/dataStatistics/WeightTrend.vue') },
+        { path: '/FormulaEffect', component: () => import('../views/dataStatistics/FormulaEffect.vue') },
+        { path: '/GrowthRate', component: ()=> import('../views/dataStatistics/GrowthRate.vue') },
+        { path: '/FeedCost', component: () => import('../views/dataStatistics/FeedCost.vue') },
+        { path: '/DiseaseSituation', component: () => import('../views/dataStatistics/DiseaseSituation.vue') },
+        { path: '/SurvivalRate', component: () => import('../views/dataStatistics/SurvivalRate.vue') },
+        { path: '/WeightRecord', component: () => import('../views/cowManagement/WeightRecord.vue') },
+        { path: '/CowInfo', component: () => import('../views/cowManagement/CowInfo.vue') },
+        { path: '/EventRecord', component: () => import('../views/cowManagement/EventRecord.vue') },
+        { path: '/CowCowShed', component: () => import('../views/cowShedManagement/CowCowShed.vue') },
+        { path: '/CowShedGroup', component: () => import('../views/cowShedManagement/CowShedGroup.vue') },
+        { path: '/FeedPlan', component: () => import('../views/formulaPlan/FeedPlan.vue') },
+        { path: '/FormulaTemplate', component: () => import('../views/formulaPlan/FormulaTemplate.vue') },
+        { path: '/WorkTaskAssign', component: () => import('../views/workManagement/WorkTaskAssign.vue') },
+        { path: '/WorkTaskImplement', component: () => import('../views/workManagement/WorkTaskImplement.vue') },
+        { path: '/CalfType', component: () => import('../views/basicSettings/CalfType.vue') },
+        { path: '/WorkOrderType', component: () => import('../views/basicSettings/WorkOrderType.vue') },
+        { path: '/FeedCarManagement', component: () => import('../views/basicSettings/FeedCarManagement.vue') },
+        { path: '/DiseaseManagement', component: () => import('../views/basicSettings/DiseaseManagement.vue') },
+        { path: '/InfoRemind', component: () => import('../views/basicSettings/InfoRemind.vue') },
+        { path: '/DiseaseType', component: () => import('../views/basicSettings/DiseaseType.vue') },
+        { path: '/FeedTemplate', component: () => import('../views/basicSettings/FeedTemplate.vue') },
+        { path: '/DefaultPara', component: () => import('../views/basicSettings/DefaultPara.vue') },
+        { path: '/FeedCostSet', component: () => import('../views/basicSettings/FeedCostSet.vue') },
+        { path: '/User', component: () => import('../views/systemManagement/User.vue') },
+        { path: '/Role', component: () => import('../views/systemManagement/Role.vue') },
+      ]
     }
   ]
 })
@@ -128,9 +110,8 @@ router.beforeEach((to, form, next) => {
   //从本地存储获取到token信息
   // const tokenStr  = window.sessionStorage.getItem('token')
   //没有token就强制跳转到登录页
-   //if (!tokenStr) return next('/login')
+  //if (!tokenStr) return next('/login')
   next()
 })
 
 export default router
-