vue router按需加载

Posted 2020-11-02 铜镜123

 1 import Vue from ‘vue‘
 2 import Router from ‘vue-router‘
 3 
 4 Vue.use(Router);
 5 //按需加载,当渲染其他页面时才加载其组件,并缓存,减少首屏加载时间
 6 const Index = resolve => require([‘@/views/Index.vue‘], resolve)
 7 const Category = resolve => require([‘@/views/Category.vue‘], resolve)
 8 const CategoryMain = resolve => require([‘@/components/category/main.vue‘], resolve)
 9 const Car = resolve => require([‘@/views/Car.vue‘],resolve)
10 const User = resolve => require([‘@/views/User.vue‘], resolve)
11 const Detail = resolve => require([‘@/views/Detail.vue‘], resolve)
12 const Search = resolve => require([‘@/views/Search.vue‘], resolve)
13 const Pay = resolve => require([‘@/components/car/pay/pay.vue‘], resolve)
14 const Login = resolve => require([‘@/views/login.vue‘], resolve)
15 
16 
17 export default new Router({
18   routes: [{
19       path: ‘/‘,
20       name: ‘首页‘,
21       component: Index
22     }, {
23       path: ‘/category‘,
24       name: ‘分类页‘,
25       redirect: ‘/category/all‘,
26       component: Category,
27       children: [{
28         path: ‘/category/:tab‘,
29         component:CategoryMain
30       }]
31     }, {
32       path: ‘/car‘,
33       name: ‘购物车页‘,
34       component: Car
35     }, {
36       path: ‘/car/pay‘,
37       name: ‘支付页‘,
38       component: Pay
39     },
40     {
41       path: ‘/user‘,
42       name: ‘用户页‘,
43       component: User,
44       meta: {
45            requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录才能进入的
46        },
47     }, {
48       path: ‘/detail‘,
49       name: ‘详情页‘,
50       component: Detail
51     }, {
52       path: ‘/search‘,
53       name: ‘搜索页‘,
54       component: Search
55     },{
56       path: ‘/login‘,
57       name: ‘登录页‘,
58       component: Login
59     }
60   ]
61 })

 

 

  1 import Vue from ‘vue‘
  2 import Router from ‘vue-router‘
  3 
  4 // import Index from ‘@/components/index/index‘
  5 // import Find from ‘@/components/find/find‘
  6 // import Order from ‘@/components/order/order‘
  7 // import Mine from ‘@/components/mine/mine‘
  8 // import RestaurantDetail from ‘@/components/index/restaurant-detail/restaurant-detail‘
  9 // import RestaurantList from ‘@/components/index/restaurant-list/restaurant-list‘
 10 // import Goods from ‘@/components/index/restaurant-detail/goods/goods‘
 11 // import Ratings from ‘@/components/index/restaurant-detail/ratings/ratings‘
 12 // import Seller from ‘@/components/index/restaurant-detail/seller/seller‘
 13 // import login from ‘@/components/login/login‘
 14 
 15 Vue.use(Router)
 16 
 17 // 路由懒加载
 18 const Index = (resolve) => {
 19   import(‘@/components/index/index‘).then((module) => {
 20     resolve(module)
 21   })
 22 }
 23 const Find = (resolve) => {
 24   import(‘@/components/find/find‘).then((module) => {
 25     resolve(module)
 26   })
 27 }
 28 const Order = (resolve) => {
 29   import(‘@/components/order/order‘).then((module) => {
 30     resolve(module)
 31   })
 32 }
 33 const Mine = (resolve) => {
 34   import(‘@/components/mine/mine‘).then((module) => {
 35     resolve(module)
 36   })
 37 }
 38 const RestaurantDetail = (resolve) => {
 39   import(‘@/components/index/restaurant-detail/restaurant-detail‘).then((module) => {
 40     resolve(module)
 41   })
 42 }
 43 const RestaurantList = (resolve) => {
 44   import(‘@/components/index/restaurant-list/restaurant-list‘).then((module) => {
 45     resolve(module)
 46   })
 47 }
 48 const Goods = (resolve) => {
 49   import(‘@/components/index/restaurant-detail/goods/goods‘).then((module) => {
 50     resolve(module)
 51   })
 52 }
 53 const Ratings = (resolve) => {
 54   import(‘@/components/index/restaurant-detail/ratings/ratings‘).then((module) => {
 55     resolve(module)
 56   })
 57 }
 58 const Seller = (resolve) => {
 59   import(‘@/components/index/restaurant-detail/seller/seller‘).then((module) => {
 60     resolve(module)
 61   })
 62 }
 63 const login = (resolve) => {
 64   import(‘@/components/login/login‘).then((module) => {
 65     resolve(module)
 66   })
 67 }
 68 
 69 export default new Router({
 70   routes: [
 71     // 根路径
 72     {
 73       path: ‘/‘,
 74       redirect: ‘/index‘,
 75       component: Index
 76     },
 77     // 首页
 78     {
 79       path: ‘/index‘,
 80       component: Index
 81     },
 82     // 登录
 83     {
 84       path: ‘/login‘,
 85       component: login
 86     },
 87     // 商家列表
 88     {
 89       path: ‘/restaurant_list‘,
 90       component: RestaurantList
 91     },
 92     // 商家模块
 93     {
 94       path: ‘/restaurant‘,
 95       redirect: ‘/restaurant/goods‘,
 96       component: RestaurantDetail,
 97       children: [
 98         {
 99           path: ‘goods‘,
100           component: Goods
101         },
102         {
103           path: ‘ratings‘,
104           component: Ratings
105         },
106         {
107           path: ‘seller‘,
108           component: Seller
109         }
110       ]
111     },
112     // 发现
113     {
114       path: ‘/find‘,
115       component: Find
116     },
117     // 订单
118     {
119       path: ‘/order‘,
120       component: Order
121     },
122     // 我的
123     {
124       path: ‘/mine‘,
125       component: Mine
126     }
127   ]
128 })