vue 创建公用的头部和底部

1.创建head.vue和foot.vue文件 (在这之前我们要引入 Mint UI 查看Mint UI引入的方式)
head.vue文件

<template>
	<div id="head">
        <mt-header :title="title">
		  	<router-link to="" slot="left" v-if="!goBackBtn">
		    	<mt-button icon="back"  @click.native="$router.back(-1)"></mt-button>
		  	</router-link>
	  		<mt-button @click="linkTo(url)" slot="right">{{name}}</mt-button>
		</mt-header>
    </div>
</template>

<script>
	export default {
		name: "Head",
        data() {
            return {
				
            }
        },
        props:['title','goBackBtn','show','name','url'],
        methods:{
        	linkTo: function(url) {
        		this.$router.push({ path:url  })
        	}
        }
    }
</script>

<style scoped>
	#head{
		width: 100%;height: 40px;position: fixed;top: 0;left: 0;z-index: 9999;
	}
    .mint-header{
    	background-color: #fa4330;height: 45px;
    }
</style>

foot.vue

<template>
	<mt-tabbar v-model="message" fixed>
	  <mt-tab-item id="首页">
	    <img slot="icon" :src="this.atabs[0]">
	    首页
	  </mt-tab-item>
	  <mt-tab-item id="已接任务">
	    <img slot="icon" :src="this.atabs[1]">
	    已接任务
	  </mt-tab-item>
	  <mt-tab-item id="任务大厅">
	    <img slot="icon" :src="this.atabs[2]">
	    任务大厅
	  </mt-tab-item>
	  <mt-tab-item id="申诉中心">
	    <img slot="icon" :src="this.atabs[3]">
	    申诉中心
	  </mt-tab-item>
	  <mt-tab-item id="我的">
	    <img slot="icon" :src="this.atabs[4]">
	    我的
	  </mt-tab-item>
	</mt-tabbar>
</template>

<script>
	export default {
        data() {
            return{
            	//选中的tabbar值message为外面页面传入的值selected
			    message:this.selected,
			    //这里使用的icon图标为图片，所以需要加图片改变的传入，若使用阿里图标，则不用加
			    atabs:this.tabs,
            }
        },   
        props:{
        	selected: String,
			tabs:Array,
       },
        watch: {
		    message: function (val, oldVal) {
		      // 这里就可以通过 val 的值变更来确定去向
		      switch(val){
		        case '首页':
		          this.$router.push('/Home');
		        break;
		        case '已接任务':
		          this.$router.push('/Task');
		        break;
		        case '任务大厅':
		          this.$router.push('/Hall');
		        break;
				case '申诉中心':
		          this.$router.push('/Mine');
		        break;
				case '我的':
		          this.$router.push('/Mine');
		        break;
		      }
		    }
	  	},
        methods: {
            
        }
    }
</script>

<style scoped>
	.mint-tabbar.is-fixed{
		background: #FFFFFF;
		border-top: 1px solid #e5e5e5;
	}
	.mint-tab-item{
		color: #909090;
	}
    .mint-tabbar > .mint-tab-item.is-selected{
    	background-color: transparent;color: #fa4330;
    }
</style>

2.在main.js中挂载并注册文件

import vHeader from './components/Head.vue'
import vFoot from './components/Foot.vue'
Vue.component('v-head',vHeader)
Vue.component('v-foot',vFoot)

3.引用组件

<v-head :title="headTitle" :goBackBtn="goBackBtn" :name="name" :url="url"></v-head>
<v-foot :selected="selected" :tabs='tabs'></v-foot>

export default {
	name: '',
	data(){
		return{
			headTitle: "任务大厅",
			goBackBtn: true,
			name: '接单设置',
			selected:"任务大厅",
			url:'/SetUp',
			tabs:[
			      	require("../assets/foot-icon/home01.png"),require("../assets/foot-icon/task01.png"),
			        require("../assets/foot-icon/hall02.png"),require("../assets/foot-icon/core01.png"),require("../assets/foot-icon/my01.png")
		     	]
		}
	}
}