一个菜鸟的互联网技术分享博客
您的位置: 主页 > 使用vue全家桶高仿小米商城--订单父组件结构封装
advertisement

使用vue全家桶高仿小米商城--订单父组件结构封装

本次只要改变一个页面:order.vue,代码如下:
  1. <template>  
  2.     <div>  
  3.         <order-header :title="title">  
  4.             <template v-slot:tip>  
  5.                 <span>{{tip}}</span>  
  6.             </template>  
  7.         </order-header>  
  8.         <router-view></router-view>  
  9.         <service-bar></service-bar>  
  10.         <nav-footer></nav-footer>  
  11.     </div>  
  12. </template>  
  13.   
  14. <script>  
  15.     import OrderHeader from './../components/OrderHeader'  
  16.     import NavFooter from './../components/NavFooter'  
  17.     import ServiceBar from './../components/ServiceBar'  
  18.     export default{  
  19.         name:'order',  
  20.         data(){  
  21.             return{  
  22.                 title:'',  
  23.                 tip:''  
  24.             }  
  25.         },  
  26.         components:{  
  27.             OrderHeader,  
  28.             ServiceBar,  
  29.             NavFooter  
  30.         },  
  31.         mounted() {  
  32.             let path = this.$route.path;  
  33.             if(path== '/order/confirm'){  
  34.                 this.title = '订单确认';  
  35.                 this.tip = '请认真填写收货地址'  
  36.             }else if(path== '/order/list'){  
  37.                 this.title = '订单列表';  
  38.                 this.tip = '请谨防钓鱼链接或诈骗电话,了解更多>'  
  39.             }else if(path== '/order/pay'){  
  40.                 this.title = '订单支付';  
  41.                 this.tip = '请谨防钓鱼链接或诈骗电话,了解更多>'  
  42.             }  
  43.         }  
  44.     }  
  45. </script>  
  46. <style>  
  47. </style>

zhangren.online
上一篇:使用vue全家桶高仿小米商城--退出功能实现及优化
下一篇:使用vue全家桶高仿小米商城--订单确认页面

您可能喜欢

回到顶部