一个菜鸟的互联网技术分享博客
您的位置: 主页 > 使用vue全家桶高仿小米商城--路由按需加载优化
advertisement

使用vue全家桶高仿小米商城--路由按需加载优化

既然是路由,那么要修改的就是router.js文件了,代码如下:
  1. import Vue from 'vue'  
  2. import Router from 'vue-router'  
  3. import Home from './pages/home'  
  4. import Index from './pages/index'  
  5. Vue.use(Router);  
  6.   
  7. export default new Router({  
  8.   routes:[  
  9.     {  
  10.       path:'/',  
  11.       name:'home',  
  12.       component:Home,  
  13.       redirect:'/index',  
  14.       children:[  
  15.         {  
  16.           path: '/index',  
  17.           name: 'index',  
  18.           component: Index,  
  19.         }, {  
  20.           path: '/product/:id',  
  21.           name: 'product',  
  22.           component: () => import('./pages/product.vue')  
  23.         }, {  
  24.           path: '/detail/:id',  
  25.           name: 'detail',  
  26.           component: () => import('./pages/detail.vue')  
  27.         }  
  28.       ]  
  29.     },  
  30.     {  
  31.       path: '/login',  
  32.       name: 'login',  
  33.       component: () => import('./pages/login.vue')  
  34.     },  
  35.     {  
  36.       path: '/cart',  
  37.       name: 'cart',  
  38.       component: () => import('./pages/cart.vue')  
  39.     },  
  40.     {  
  41.       path: '/order',  
  42.       name: 'order',  
  43.       component: () => import('./pages/order.vue'),  
  44.       children:[  
  45.         {  
  46.           path: 'list',  
  47.           name: 'order-list',  
  48.           component: () => import('./pages/orderList.vue')  
  49.         },  
  50.         {  
  51.           path: 'confirm',  
  52.           name: 'order-confirm',  
  53.           component: () => import('./pages/orderConfirm.vue')  
  54.         },  
  55.         {  
  56.           path: 'pay',  
  57.           name: 'order-pay',  
  58.           component: () => import('./pages/orderPay.vue')  
  59.         },  
  60.         {  
  61.           path: 'alipay',  
  62.           name: 'alipay',  
  63.           component: () => import('./pages/alipay.vue')  
  64.         }  
  65.       ]  
  66.     }  
  67.   ]  
  68. });  
因为使用了Babel,所以我们需要安装syntax-dynamic-import插件:npm i @babel/plugin-syntax-dynamic-import --save
当然也可以去vue官网查相应的资料哦
zhangren.online
上一篇:使用vue全家桶高仿小米商城--订单列表
下一篇:vue使用组件的细节

您可能喜欢

​vue中非父子组件传值

​vue中非父子组件传值

​vue中ref的使用

​vue中ref的使用

回到顶部