vue外卖十三：店铺详情:页面路由子组件创建使用、页面框架构建、多tab样式

页面路由子组件创建使用、页面框架构建、多tab样式"/>

vue外卖十三：店铺详情:页面路由子组件创建使用、页面框架构建、多tab样式

店铺详情自首页商家列表点入

一、设计/创建店铺详情路由组件、头部组件框架

分析页面结构设计出目录结构

1）创建店铺详情的 目录/文件

Shop
│  Shop.vue
├─Goods
│      Goods.vue
├─Info
│      Info.vue
└─RatingRating.vue

2）建立路由/子路由

新知识点：export default 导出重命名：
import {default as ShopGoods} from '../pages/Shop/Goods/Goods.vue'

import Vue from 'vue'
import VueRouter from 'vue-router'import Msite from '../pages/Msite/Msite.vue'
import Order from '../pages/Order/Order.vue'
import Profile from '../pages/Profile/Profile.vue'
import Search from '../pages/Search/Search.vue'
import Login from '../pages/Login/Login.vue'//【1】导入各个路由组件
import Shop from '../pages/Shop/shop.vue'
import {default as ShopGoods} from '../pages/Shop/Goods/Goods.vue'
import {default as ShopRating} from '../pages/Shop/Rating/Rating.vue'
import {default as ShopInfo} from '../pages/Shop/Info/Info.vue'//使用路由插件写法
Vue.use(VueRouter)export default new VueRouter({//务必注意routes、component、等单词拼写，否则可造成路由跳转但不显示情况routes:[{path:'/',redirect:'/msite',},{path:'/msite',component:Msite,meta:{showFooter:true}},{path:'/order',component:Order,meta:{showFooter:true}},{path:'/profile',component:Profile,meta:{showFooter:true}},{path:'/search',component:Search,meta:{//标记底组件是否在页面显示，有此标签表示显示//引用时带v-show即可：<FooterGuide v-show='$route.meta.showFooter'></FooterGuide>showFooter:true}},{path:'/login',component:Login},{//【2】创建路由映射path:'/shop',component:Shop,//【3】子路由children:[{//注意path写法path:'/shop/goods',component:ShopGoods},{path:'/shop/rating',component:ShopRating},{path:'/shop/info',component:ShopInfo},{//】路径为/shop时显示商品列表path:'',redirect:'/shop/goods'}]}]
})

二、搭建页面

1）msite.vue首页点击转到商品详情,实际组件shopList.vue

此处正常要传参数显示对应商家，因目前仅一个商家暂不传参数

<!-- onclick跳转路由； 也可把li写成 router-link to=/shop； -->
<li @click="$router.push('/shop')" class="shop_li border-1px" v-for="(shop,key) in shops" :key="key">
。。。略过

2）shop/shop.vue搭建框架

<template><div><!-- 头部公共组件 --><ShopHeader/><div class="tab"><!-- tab1 --><div class="tab-item"><router-link to="/shop/goods" replace>点餐</router-link></div><!-- tab2 --><div class="tab-item"><router-link to="/shop/rating" replace>评价</router-link></div><!-- tab3 --><div class="tab-item"><router-link to="/shop/info" replace>商家</router-link></div></div><!-- 显示子路由组件视窗 --><router-view/></div>
</template><script>import ShopHeader from '../../components/ShopHeader/index.vue'export default{components:{ShopHeader,}}
</script><style lang="stylus"></style>

效果：从首页商家列表点进来点不同路由链接会显示对应子组件

http://localhost:8080/#/shop/goods

3）tab加样式

<style lang="stylus">@import "../../common/stylus/mixins.styl".tabheight 40pxline-height 40pxbackground #fffbottom-border-1px(rgba(7, 17, 27, 0.1)).tab-itemfloat leftwidth: 33.33333%text-align centerfont-size 14pxcolor rgb(77, 85, 93)adisplay blockposition relative&.router-link-activecolor #02a774&::aftercontent ''position absoluteleft 50%bottom 1pxwidth 35pxheight 2pxtransform translateX(-50%)background #02a774
</style>

效果：http://localhost:8080/#/shop/info