Присвоить класс актив родителю router link vue.js?

Question

[Dauren S]

<ul  class="nav flex-column nav-pills side-nav" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <li class="list-group-item"> <router-link to="/nutrition/foodmenu">Перспективное меню</router-link></li>
            <li class="list-group-item"><router-link to="/nutrition/journal">Журнал питания</router-link></li>
           <li class="list-group-item"><router-link to="/nutrition/ambarbook">Амбарная книга</router-link></li>
        </ul>

При клике на router-link ему присваивается класс router-link-exact-active router-link-active. Вопрос: Как родителю т.е тегу LI присвоить класс activ?Есть ли какое нибудь элегантное решение.

Answer 1

[Дима Паутов]

<template>
  <ul  class="nav flex-column nav-pills side-nav" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <li 
      class="list-group-item"
      v-for="(menuItem, index) in menu"
      :key="index"
      :class="{
        active: $route.path === menuItem.url
      }"
    >
      <router-link :to="menuItem.url">
        {{ menuItem.title }}
      </router-link>
    </li>
  </ul>
</template>

export default {
  data: () => ({
    menu: [
      {
      	title: 'Перспективное меню',
        url: '/nutrition/foodmenu'
      },
      {
      	title: 'Журнал питания',
        url: '/nutrition/journal'
      },
      {
      	title: 'Амбарная книга',
        url: '/nutrition/ambarbook'
      }
    ]
  })
}

Или коротко:

<ul  class="nav flex-column nav-pills side-nav" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <li class="list-group-item" :class="{ active: $route.path === '/nutrition/foodmenu' }"> <router-link to="/nutrition/foodmenu">Перспективное меню</router-link></li>
  <li class="list-group-item" :class="{ active: $route.path === '/nutrition/journal' }"><router-link to="/nutrition/journal">Журнал питания</router-link></li>
  <li class="list-group-item" :class="{ active: $route.path === '/nutrition/ambarbook' }"><router-link to="/nutrition/ambarbook">Амбарная книга</router-link></li>
</ul>

т.е. ручками у каждого пункта, иных решений нет.
P.S. это самое галимое решение!

Comments

[Dauren S]

СПАСИБО!!!!!!!!!!!

Answer 2

[0xD34F]

Документации есть что сказать по этому поводу.

Можно попробовать прислушаться:

data: () => ({
  links: [
    { to: '...', title: '...' },
    { to: '...', title: '...' },
    ...
  ],
}),

<ul>
  <router-link v-for="n in links" :to="n.to" v-slot="s">
    <li :class="{ active: s.isExactActive }">
      <a :href="s.href" @click="s.navigate">{{ n.title }}</a>
    </li>
  </router-link>
</ul>

Answer 3

[Aetae]

Или просто сделать так:

<ul class="nav flex-column nav-pills side-nav" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <router-link tag="li" class="list-group-item" active-class="activ" to="/nutrition/foodmenu">Перспективное меню</router-link>
  <router-link tag="li" class="list-group-item" active-class="activ" to="/nutrition/journal">Журнал питания</router-link>
  <router-link tag="li" class="list-group-item" active-class="activ" to="/nutrition/ambarbook">Амбарная книга</router-link>
</ul>