<template>
    <!-- Footer Start -->
    <footer class="footer-wrap">
      <ul class="footer">
        <li class="footer-item" :class="{active: $route.path=='/home'}">
          <router-link to="/" class="footer-link">
            <i class="icon-home icli"></i>
            <span>首頁</span>
          </router-link>
        </li>
        <li class="footer-item" :class="{active: $route.path=='/category'}">
          <router-link to="/category?type=1" class="footer-link">
            <i class="icon-food-fork-drink icli"></i>
            <span>線上點餐</span>
          </router-link>
        </li>
        <li class="footer-item" :class="{active: $route.path=='/user/info'}">
          <router-link to="/user/info" class="footer-link">
            <i class="icon-account icli"></i>
            <span>我的</span>
          </router-link>
        </li>
      </ul>
    </footer>
    <!-- Footer End -->
</template>

<script  setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const active = ref('Home')

onMounted(async () => {
  await router.isReady()
  // console.log(route.name)
  active.value = route.name
})

</script>

<style lang="less" scoped>
</style>
