<template> <q-item clickable @click="onClick" :active="pageStore.activeRouter?.path === link ? true : false" active-class="bg-primary-bg-light" > <q-item-section v-if="icon" avatar> <q-avatar size="md" square> <img :src="icon" /> </q-avatar> </q-item-section> <q-item-section> <q-item-label>{{ title }}</q-item-label> <q-item-label caption>{{ caption }}</q-item-label> </q-item-section> </q-item> </template> <script lang="ts"> import { defineComponent, reactive, toRefs } from 'vue'; import { useRouter } from 'vue-router'; import { usePageStore } from 'src/common/hooks'; export default defineComponent({ name: 'EssentialLink', props: { active: { type: Boolean, required: true, }, title: { type: String, required: true, }, caption: { type: String, default: '', }, link: { type: String, default: '#', }, icon: { type: String, default: '', }, }, setup(props) { const pageStore = usePageStore(); const router = useRouter(); const state = reactive({ // }); const onClick = () => { const currentRouter = router.currentRoute.value.path; if (currentRouter === props.link) return; router.push(props.link); }; return { ...toRefs(state), onClick, pageStore, }; }, }); </script>