footer.vue 864 B

12345678910111213141516171819202122232425262728293031323334
  1. <template>
  2. <div class="w-full bg-white">
  3. <van-tabbar v-model="currentRouteName" safe-area-inset-bottom :fixed="false" @change="toPath">
  4. <van-tabbar-item :name="item.pathName" :icon="item.icon" v-for="item in tabBarOption">{{ item.title }}</van-tabbar-item>
  5. </van-tabbar>
  6. </div>
  7. </template>
  8. <script setup>
  9. import { ref, onActivated } from 'vue';
  10. import { useRoute } from 'vue-router'
  11. import { useLifecycle } from '@hooks/useCommon.js';
  12. import useRouterStore from "@store/useRouterStore.js";
  13. import tabBarOption from "../../tabBar"
  14. const route = useRoute()
  15. const router = useRouterStore()
  16. const currentRouteName = ref(route.name)
  17. function toPath(name) {
  18. router.switchTabBar({ pathName: name })
  19. }
  20. useLifecycle({
  21. load: () => {
  22. currentRouteName.value = route.name
  23. }
  24. });
  25. </script>
  26. <style lang='scss' scoped>
  27. /* 样式代码 */
  28. </style>