Как использовать активный стиль VueJS router-link

: активный псевдокласс - это не то же самое, что добавление класс для стилизации элемента.

Псевдокласс: active CSS представляет элемент (например, кнопку), который активируется пользователем. При использовании мыши «активация» обычно начинается при нажатии кнопки мыши и заканчивается при ее отпускании.

Мы ищем такой класс, как .active, который мы можем использовать для стилизации элемента навигации.

Более ясный пример разницы между :active и .active см. В следующем фрагменте:

li:active {
  background-color: #35495E;
}

li.active {
  background-color: #41B883;
}

<ul>
  <li>:active (pseudo-class) - Click me!</li>
  <li class="active">.active (class)</li>
</ul>

Vue-Router

vue-router автоматически применяет два активных класса, .router-link-active и .router-link-exact-active, к компоненту <router-link>.

router-link-active

Этот класс автоматически применяется к компоненту <router-link> при совпадении его целевого маршрута.

Это работает с использованием инклюзивного поведения сопоставления. Например, <router-link to="/foo"> будет применять этот класс, пока текущий путь начинается с /foo/ или /foo.

Итак, если бы у нас были <router-link to="/foo"> и <router-link to="/foo/bar">, оба компонента получили бы класс router-link-active, когда путь равен /foo/bar.

router-link-exact-active

Этот класс автоматически применяется к компоненту <router-link>, когда его целевой маршрут является точным совпадением. Учтите, что в этом случае к компоненту будут применены оба класса router-link-active и router-link-exact-active.

Используя тот же пример, если бы у нас были <router-link to="/foo"> и <router-link to="/foo/bar">, router-link-exact-activeclass только применялся бы к <router-link to="/foo/bar">, когда путь /foo/bar.

Точная опора

Допустим, у нас есть <router-link to="/">, произойдет то, что этот компонент будет активен для каждого маршрута. Возможно, это не то, что нам нужно, поэтому мы можем использовать свойство exact так: <router-link to="/" exact>. Теперь к компоненту будет применяться активный класс, только если он точно соответствует /.

CSS

Мы можем использовать эти классы для стилизации нашего элемента, например:

 nav li:hover,
 nav li.router-link-active,
 nav li.router-link-exact-active {
   background-color: indianred;
   cursor: pointer;
 }

Тег <router-link> был изменен с помощью свойства tag, <router-link tag="li" />.

Глобальное изменение классов по умолчанию

Если мы хотим изменить классы по умолчанию, предоставляемые vue-router глобально, мы можем сделать это, передав некоторые параметры экземпляру vue-router следующим образом:

const router = new VueRouter({
  routes,
  linkActiveClass: "active",
  linkExactActiveClass: "exact-active",
})

Изменение классов по умолчанию для каждого экземпляра компонента (<router-link>)

Если вместо этого мы хотим изменить классы по умолчанию для <router-link>, а не глобально, мы можем сделать это с помощью _ 41_ и exact-active-class, например так:

<router-link to="/foo" active-class="active">foo</router-link>

<router-link to="/bar" exact-active-class="exact-active">bar</router-link>

API v-slot

Vue Router 3.1.0+ предлагает низкоуровневую настройку с помощью слота с ограниченной областью действия. Это удобно, когда мы хотим стилизовать элемент оболочки, например элемент списка <li>, но при этом сохранить логику навигации в элементе привязки <a>.

<router-link
  to="/foo"
  v-slot="{ href, route, navigate, isActive, isExactActive }"
>
  <li
    :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
  >
    <a :href="href" @click="navigate">{{ route.fullPath }}</a>
  </li>
</router-link>

При создании маршрутизатора вы можете указать linkExactActiveClass в качестве свойства, чтобы установить класс, который будет использоваться для активного канала маршрутизатора.

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes,
  linkActiveClass: "active", // active class for non-exact links.
  linkExactActiveClass: "active" // active class for *exact* links.
})

Это задокументировано здесь.

https://router.vuejs.org/en/api/router-link.html добавьте атрибут active-class = "active", например:

<ul class="nav navbar-nav">
    <router-link tag="li" active-class="active" to="/" exact><a>Home</a></router-link>
    <router-link tag="li" active-class="active" to="/about"><a>About</a></router-link>
    <router-link tag="li" active-class="active" to="/permission-list"><a>Permisison</a></router-link>
</ul>

Как упоминалось выше @Ricky, vue-router автоматически применяет к компоненту два активных класса .router-link-active и .router-link-exact-active.

Итак, чтобы изменить активную ссылку css, используйте:

.router-link-exact-active{
 //your desired design when link is clicked
font-weight: 700;
}

Просто добавьте к решению @Bert, чтобы было понятнее:

    const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes,
  linkExactActiveClass: "active" // active class for *exact* links.
})

Как видите, эту строчку нужно убрать:

linkActiveClass: "active", // active class for non-exact links.

таким образом подсвечивается ТОЛЬКО текущая ссылка. Это должно относиться к большинству случаев.

Дэйвид

Давайте упростим, вам не нужно читать документ о настраиваемом теге (как 16-летний веб-разработчик, у меня достаточно таких тегов, например, в struts, webwork, jsp, rails, а теперь это vuejs)

просто нажмите F12, и вы увидите исходный код, например:

<div>
    <a href="#/topologies" class="luelue">page1</a> 
    <a href="#/" aria-current="page" class="router-link-exact-active router-link-active">page2</a> 
    <a href="#/databases" class="">page3</a>
</div>

так что просто добавьте стили для .router-link-active или router-link-exact-active

Если вам нужна дополнительная информация, проверьте router-link api:

https://router.vuejs.org/en/api/#router-link < / а>