<template>
  <div class="flex">
    <div class="auto">
      <ul class="nav nav-tabs">
        <li role="presentation"  @click="h1()" id="1"><a href="#">档案</a></li>
        <li role="presentation" @click="h2()" id="2"><a href="#">小区-地址</a></li>
        <li role="presentation"  @click="h3()" id="3"><a href="#">单位-地址</a></li>
      </ul>
    </div>
    <div style="margin-top:10px;" id="hh" class="span">
      <route :comp="{name: 'civil-search'}" v-if = "r1"></route>
      <route :comp="{name: 'Address-search'}" v-if = "r2"></route>
      <route :comp="{name: 'unit-search'}" v-if = "r3"></route>
    </div>
  </div>
</template>
<script>
/**
*档案管理查询列表
*/
export default {
  title: '档案管理',
  data () {
    return {
      r1: true,
      r2: false,
      r3: false
    }
  },
  methods: {
    h1 () {
      this.r1 = true
      this.r2 = false
      this.r3 = false
      this.r4 = false
    },
    h2 () {
      this.r1 = false
      this.r2 = true
      this.r3 = false
      this.r4 = false
    },
    h3 () {
      this.r1 = false
      this.r2 = false
      this.r3 = true
      this.r4 = false
    }
  }
}
</script>
