companyWx/src/App.vue

<template>
  <div id="app">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
	<!-- <router-link to='/billing'>11</router-link>
	<router-link to="/orderList">Go to Foo</router-link> -->
	<!-- <van-tabs v-model:active="active" @click="onClickTab">
	  <van-tab title="客户资料"></van-tab>
	  <van-tab title="商品查询"></van-tab>
	  <van-tab title="销售开单" ></van-tab>
	  <van-tab title="订单管理" ></van-tab>
	</van-tabs> -->
	<div class="tt">
		<div class="tabline">客户资料</div>
		<div class="tabline" :class="{'active':active==2}" @click="onClickTab(2)">商品查询</div>
		<div class="tabline " :class="{'active':active==3}" @click="onClickTab(3)">销售开单</div>
		<div class="tabline" :class="{'active':active==4}" @click="onClickTab(4)">订单管理</div>
	</div>
	<div class="hx"></div>
	<!-- 展示组件内容 -->
	<router-view></router-view> 
  </div>
</template>

<script>
import HelloWorld from './page/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
  	  return{
  		  active:3,
  	  }
  },
  created(){
	//console.log("..")
	//this.$router.push('/billing')
  },
  methods:{
	  goRouter(url){
		  console.log(url)
		  this.$router.push(url)
	  },
	  onClickTab(e){
		  console.log(e);
		  this.active=e
		  if(e==3){
			  this.$router.push('/billing')
		  }else if(e==4){
			  this.$router.push('/orderList')
		  }else if(e==2){
			  this.$router.push('/goodsQuery')
		  }
	  }
  }
}
</script>

<style >
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

 
}
.tt{
	width: 100%;
	display: flex;
	border-top: 1px solid #EEEEEE;
	border-bottom: 1px solid #EEEEEE;
	font-size: 0.3rem;
	line-height: 0.88rem;
	position: fixed;
	left: 0;
	top: 0;
	background: #ffffff;
}
.hx{
	height: 0.88rem;
}
.tabline{
	width: 25%;
	text-align: center;
	
	
}
.active{
	color: #3F90F7;
}

</style>