Как сделать меню, как на официальном сайте vue js?

Question

[Icantdothis]

Меня очень заинтересовало то самое боковое меню с официального сайта/документации Vue.js.
Дело в том, что я не знаю как его сделать, мол к примеру те же активные теги h.
Вот к примеру: как сделать, чтобы я нажал на заголовок, он применил стили, открылся подзаголовок, на него нажал и применились стили.

Но всё же вопрос"как сделать так же" - ещё не опустил.
Если будет код - большое спасибо

Answer 1

[alaskafx]

<template>
  <ul>
    <li>
      <div class="link fir" @click="goToInstallation(); wtactiv()" v-bind:class="{ actived: isActive }" >Installation</div>
      <ul v-if="currentLink === 'installation'">
        <li>Process of Installation</li>
        <li>Another Installation</li>
      </ul>
    </li>
    <li>
      <div class="link sec" @click="goToCommunication(); twoact()" v-bind:class="{ actived: twoActive  }" >Communication</div>
      <ul v-if="currentLink === 'okda'">
        <li @click='activated'>Commun Submenu 1</li>
        <li>Commun Submenu 2</li>
      </ul>
    </li>
    <!-- <h1 class="static fir" @click="wtactiv" v-bind:class="{ actived: isActive }">первое</h1>
    <h2 class="static sec" @click="twoact" v-bind:class="{ actived: twoActive  }">второе</h2> -->
  <h3>{{currentLink}}</h3>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      twoActive: false,
      isActive: false,
    };
  },
  methods: {
    twoact(){
      this.isActive = false
      this.twoActive = true
      
      
    },
    wtactiv(){
      this.twoActive = false
      this.isActive = true
      
      
    },
    goToInstallation() {
      this.currentLink = "installation";
    },
    goToCommunication() {
      this.currentLink = "okda";
    },
  },
};


</script>
<style scoped>
.grey{
  color: #282c34;
}
.actived{
 color: green;
}
.

.link {
  color: #282c34;
  cursor: pointer;
}
</style>

Дополнил код комментатора выше. Конечно, это на "костылях", т.к. там один метод другой зачищает, но если не делать вери-вери биг меню - то сойдёт.

Answer 2

[postya]

В боком меню не теги H, а теги li в которых находится тег a. Можешь проверить это в инспекторе.
Каждый элемент в списке в боковом меню это router link.
У router link есть два класса
.router-link-active и .router-link-exact-active

ты можешь переопределить стили для активного линка либо в конкретном компоненте(например компонент бокового меню) либо в общем файле, где содержатся глобальные стили

.router-link-exact-active {
color: red;
}

Пример с подзаголовками:
сделай боковое меню отдельным компонентом. Создай там переменную, в которую будешь назначать текущий роут. Показывай/ скрывай нужные блоки в зависимости от значения этой переменной
размести нужные позаголовки в блоке, и в этом блоке добавь v-if
Блок с подзаголовками будет открываться в закисимости от условий, которые прописаны в v-if

Codesandbox

Только вместо div у тебя будет router link

Comments

[Icantdothis]

А что насчёт того, что неактивные заголовки не должны быть зелёными, а активные зелёными?

[postya]

Icantdothis, ты можешь переопределить класс для активных линков для router link.
https://stackoverflow.com/questions/46083220/how-t...