Router doc updates

pull/4377/head
Tuğçe Küçükoğlu 2023-09-01 14:02:08 +03:00
parent 10a7990499
commit 7cdedb794c
3 changed files with 14 additions and 14 deletions

View File

@ -7,7 +7,7 @@
</DocSectionText> </DocSectionText>
<div class="card relative z-2"> <div class="card relative z-2">
<Menubar :model="items"> <Menubar :model="items">
<template #item="{ label, item, props, root }"> <template #item="{ label, item, props, root, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom> <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action"> <a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" /> <span v-bind="props.icon" />
@ -17,7 +17,7 @@
<a v-else :href="item.url" :target="item.target" v-bind="props.action"> <a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" /> <span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span> <span v-bind="props.label">{{ label }}</span>
<span :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" /> <span :class="[hasSubmenu && (root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right')]" v-bind="props.submenuicon" />
</a> </a>
</template> </template>
</Menubar> </Menubar>

View File

@ -5,7 +5,7 @@
<i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router. <i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card"> <!-- <div class="card">
<Steps <Steps
:model="items" :model="items"
aria-label="Form Steps" aria-label="Form Steps"
@ -29,7 +29,7 @@
</a> </a>
</template> </template>
</Steps> </Steps>
</div> </div> -->
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>

View File

@ -5,7 +5,7 @@
<i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router. <i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card"> <!-- <div class="card">
<TabMenu v-model:activeIndex="active" :model="items"> <TabMenu v-model:activeIndex="active" :model="items">
<template #item="{ label, item, props }"> <template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom> <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
@ -21,7 +21,7 @@
</template> </template>
</TabMenu> </TabMenu>
<router-view /> <router-view />
</div> </div> -->
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -280,14 +280,14 @@ export default {
] ]
} }
}; };
},
watch: {
$route() {
this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
}
},
mounted() {
this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
} }
// watch: {
// $route() {
// this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
// }
// },
// mounted() {
// this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
// }
}; };
</script> </script>