Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 21:07:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: manually add active style on vue router links

Browse source
This commit is contained in:
Valentin Kaelin 2020-01-25 13:59:39 +01:00
parent dfd0c04fe7
commit 1819c0ba65
1 changed files with 9 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
client/src/layouts/Default.vue
View file

@ -65,21 +65,25 @@
<!-- NAVIGATION --> <!-- NAVIGATION -->
<router-link <router-link
:to="{ name: 'summoner', params: { region: $route.params.region, name: $route.params.name }}" :to="{ name: 'summoner', params: { region: $route.params.region, name: $route.params.name }}"
:class="isRouteActive('summoner')"
class="pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100" class="pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
exact exact
>overview</router-link> >overview</router-link>
<router-link <router-link
:to="{ name: 'summonerChampions', params: { region: $route.params.region, name: $route.params.name }}" :to="{ name: 'summonerChampions', params: { region: $route.params.region, name: $route.params.name }}"
:class="isRouteActive('summonerChampions')"
class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100" class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
exact exact
>champions</router-link> >champions</router-link>
<router-link <router-link
:to="{ name: 'summonerRecords', params: { region: $route.params.region, name: $route.params.name }}" :to="{ name: 'summonerRecords', params: { region: $route.params.region, name: $route.params.name }}"
:class="isRouteActive('summonerRecords')"
class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100" class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
exact exact
>records</router-link> >records</router-link>
<router-link <router-link
:to="{ name: 'summonerLive', params: { region: $route.params.region, name: $route.params.name }}" :to="{ name: 'summonerLive', params: { region: $route.params.region, name: $route.params.name }}"
:class="isRouteActive('summonerLive')"
class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100" class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
exact exact
>live game</router-link> >live game</router-link>
@ -159,6 +163,11 @@ export default {
apiCall() { apiCall() {
this.basicRequest({ summoner: this.summoner, region: this.region }) this.basicRequest({ summoner: this.summoner, region: this.region })
}, },
isRouteActive(currentRoute) {
return {
'router-link-active': this.$route.name === currentRoute
}
},
redirect(summoner, region) { redirect(summoner, region) {
this.$router.push(`/summoner/${region}/${summoner}`) this.$router.push(`/summoner/${region}/${summoner}`)
}, },