<template>
  <div class="footer">
    <router-view></router-view>
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="home-o" name="Home">系统设置</van-tabbar-item>
      <van-tabbar-item icon="setting-o" name="info">系统信息</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
  
<script>
import { ref, watchEffect } from 'vue';
import { useRouter, useRoute } from 'vue-router';

export default {
  setup() {
    const active = ref('home');
    const router = useRouter();
    const route = useRoute();

    const onChange = (name) => {
      router.push({ name });
    };

    watchEffect(() => {
      active.value = route.name;
    });

    return {
      active,
      onChange,
    };
  },
};
</script>
  
<style lang="less">
.footer {
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
</style>
  