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

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

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

分析页面结构设计出目录结构
在这里插入图片描述

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

Shop
│  Shop.vue
├─Goods
│      Goods.vue
├─Info
│      Info.vue
└─Rating
        Rating.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"
	.tab
		height 40px
		line-height 40px
		background #fff
		bottom-border-1px(rgba(7, 17, 27, 0.1))
		.tab-item
			float left
			width: 33.33333%
			text-align center
			font-size 14px
			color rgb(77, 85, 93)
			a
				display block
				position relative
				&.router-link-active
					color #02a774
					&::after
						content ''
						position absolute
						left 50%
						bottom 1px
						width 35px
						height 2px
						transform translateX(-50%)
						background #02a774
</style>

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

在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页