<template>
  <div class="home">
    <!-- <keep-alive> -->
      <router-view ></router-view>
    <!-- </keep-alive> -->
    <van-tabbar route>
      <van-tabbar-item  v-for="{ text, path, icon} in tabList" :key="text" v-bind="to(path)">
        <span>{{text}}</span>
        <template #icon="props">
          <common-svg :name="props.active? icon[0] : icon[1]"></common-svg>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Tabbar, TabbarItem } from 'vant';
import { menu } from '@/const/constants';
@Component({
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
})
export default class Main extends Vue {
  private readonly tabList = Object.freeze(menu);
  private to(path: any) {
    if ( typeof path === 'string' && path.startsWith('http')) {
      return {
        url: path,
      };
    }
    return {
      to: path,
      replace: 'replace',
    };
  }
}
</script>
