一个菜鸟的互联网技术分享博客
您的位置: 主页 > 使用vue全家桶高仿小米商城--分离组件和配置路由
advertisement

使用vue全家桶高仿小米商城--分离组件和配置路由

1、分离组件,如下图


2、配置路由,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. import Product from './pages/product'  
  6. import Detail from './pages/detail'  
  7. import Cart from './pages/cart'  
  8. import Order from './pages/order'  
  9. import OrderConfirm from './pages/orderConfirm'  
  10. import OrderList from './pages/orderList'  
  11. import OrderPay from './pages/orderPay'  
  12. import AliPay from './pages/alipay'  
  13.   
  14.   
  15. Vue.use(Router);  
  16.   
  17. export default new Router({  
  18.     routes:[{  
  19.         path:'/',  
  20.         name:'home',  
  21.         component:Home,  
  22.         redirect:'/index',  //重定向  
  23.         children:[{  
  24.             path:'/index',  
  25.             name:'index',  
  26.             component:Index  
  27.         },{  
  28.             path:'/product/:id',  
  29.             name:'product',  
  30.             component:Product  
  31.         },{  
  32.             path:'/detail/:id',  
  33.             name:'detail',  
  34.             component:Detail  
  35.         }]  
  36.     },  
  37.     {  
  38.         path:'/cart',  
  39.         name:'cart',  
  40.         component:Cart  
  41.     },  
  42.     {  
  43.         path:'/order',  
  44.         name:'order',  
  45.         component:Order,  
  46.         children:[{  
  47.             path:'list',  
  48.             name:'order-list',  
  49.             component:OrderList  
  50.         },{  
  51.             path:'confirm',  
  52.             name:'order-confirm',  
  53.             component:OrderConfirm  
  54.         },{  
  55.             path:'pay',  
  56.             name:'order-pay',  
  57.             component:OrderPay  
  58.         },{  
  59.             path:'alipay',  
  60.             name:'alipay',  
  61.             component:AliPay  
  62.         }]  
  63.     }]  
  64. });  

然后再在main.js下引入路由,代码如下

  1. import Vue from 'vue'  
  2. import router from './router'  
  3. import App from './App.vue'  
  4.   
  5. Vue.config.productionTip = false  
  6.   
  7. new Vue({  
  8.   router,  
  9.   render: h => h(App),  
  10. }).$mount('#app')  


zhangren.online
上一篇:使用vue全家桶高仿小米商城--安装依赖
下一篇:使用vue全家桶高仿小米商城--Storage封装

您可能喜欢

​Vue的生命周期及代码实例

​Vue的生命周期及代码实例

​vue使用组件的细节

​vue使用组件的细节

​安装Vue-cli爬坑

​安装Vue-cli爬坑

回到顶部