ksenia_mikhailova
/
demo-int-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

back forward btn

This commit is contained in:
aarizona 2024-08-29 13:13:37 +03:00
parent 7c2b82732f
commit 8d8beea7f1
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
front/src/assets/nav.scss
View File

@ -29,6 +29,11 @@ $white: #fff;
color: $white; color: $white;
cursor: pointer; cursor: pointer;
&.disabled {
opacity: 0.5;
pointer-events: none;
}
a, a,
a[href].router-link-active { a[href].router-link-active {
color: $white; color: $white;

21
front/src/components/nav.vue
View File

@ -1,13 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { Icon } from '@iconify/vue'; import { useRoute, useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { useItem } from '../stores/item'; import { useItem } from '../stores/item';
const route = useRoute() const route = useRoute()
const router = useRouter()
const page = useItem() const page = useItem()
// console.log(route.name) console.log(router)
</script> </script>
<template> <template>
<div class="nav"> <div class="nav">
@ -22,16 +23,20 @@ const page = useItem()
<i-mdi:video-3d /> <i-mdi:video-3d />
</RouterLink> </RouterLink>
</span> </span>
<span class="nav-icon" style="font-size: 1.375rem;"> <span class="nav-icon" style="font-size: 1.375rem;" v-if="false">
<i-mdi:vector-arrange-below /> <i-mdi:vector-arrange-below />
</span> </span>
</div> </div>
<div class="nav-group"> <div class="nav-group">
<span class="nav-icon"> <span class="nav-icon" :class="[{ disabled: router.options.history.state.back == null }]">
<i-mdi:arrow-left /> <RouterLink :to="router.options.history.state.back" @click.prevent="router.back()">
<i-mdi:arrow-left />
</RouterLink>
</span> </span>
<span class="nav-icon"> <span class="nav-icon" :class="[{ disabled: router.options.history.state.forward == null }]">
<i-mdi:arrow-right /> <RouterLink :to="router.options.history.state.forward" @click.prevent="router.forward()">
<i-mdi:arrow-right />
</RouterLink>
</span> </span>
</div> </div>
<div class="nav-content"> <div class="nav-content">