head头部导航

左边后退图标：图标是iconfont v-if来控制该标签的显示和隐藏 因为在某些组件中（如购物车组件 首页组件） 不使用该图标 监听该图标的点击 点击后返回上一页

<span class="go-back" v-if="goBack" @click="funGoBack()">
	<i class="iconfont">&#xe61c;</i>
</span>
<script>
	funGoBack() {   //返回上一页（不怎么懂）
		//$route.fullPath: string 完成解析后的URL，包含查询参数和hash的完整路径。
    	if (this.$route.fullPath.indexOf('/store') !== -1) {
			this.$router.push({path: '/index'})// 返回首页
    	} else {
			this.$router.go(-1);// 如果是从商家详情页跳转过来的 则后退
		}
	}
</script>

中间展示标题：由父组件传入

<span class="title">{{title}}</span>

右边可能啥也没有 可能是… 可能是编辑/取消编辑购物车：使用v-if控制…的展示与隐藏 插槽来控制编辑/取消编辑购物车

<!--
在商家详情页组件中 右上角会有... 点击展示更多信息 此处只是展示了... 并没有实现点击展示更多的功能
该标签用来展示... ...也是iconfont v-if来控制该标签的显示和隐藏 因为也就在店家详情页组件会用到他
-->
<span class="more" v-if="more"><i class="iconfont">&#xe602;</i></span>
<!--下面是三个插槽-->
<slot name="save-address"></slot>
<!--下面两个用于购物车组件中 展示右上角编辑、取消编辑-->
<slot name="edit-cart"></slot>
<slot name="cancel-edit-cart"></slot>

bottom底部导航

标签：公用,购物车,编辑,&#,components,组件,fullPath,图标
来源： https://blog.csdn.net/CaraYQ/article/details/122008832