Eu tenho um menu dinâmico que vem de uma Rest API. <br> **Meu problema é:** Hoje quando eu acesso alguma página, todos os menus vem fechados. Eu queria que quando eu entrasse por exemplo em uma página de 3° nível, gostaria que meu menu abrisse de acordo de onde o usuário está, para ele se localizar. <br> Para os meus "ul" abrir, eu preciso colocar a classe "**collapse in**". Eu fiz a condição de "**:class**" na minha tag "**a**" e funciona, será que devo usar ela de condição para abrir meus "**ul**" ? Obrigado! **Menu.vue**: <template> <li v-for="item in Menu"> <router-link :to="{ name: item.Rota }" tag="a" :class="{ 'active': $route.name === item.Rota }"> {{item.Nome}} </router-link> <ul class="nav nav-second-level" v-if="item.SubMenu != null"> <li v-for="SecondItem in item.SubMenu"> <router-link :to="{ name: SecondItem.Rota }" tag="a" :class="{ 'active': $route.name === SecondItem.Rota }"> {{SecondItem.Nome}} </router-link> <ul class="nav nav-third-level" v-if="SecondItem.MenuItem != null"> <li v-for="ThirdItem in SecondItem.MenuItem"> <router-link :to="{ name: ThirdItem.Rota }" tag="a" :class="{ 'active': $route.name === ThirdItem.Rota }"> {{ThirdItem.Nome}} </router-link> </li> </ul> </li> </ul> </li> </template> <script> import axios from 'axios' export default { data: () => ({ Menu: [] }), created() { let Data = [{ "Nome": "Produtos", "MenuItem": [{ "Nome": "Catalogos de Produtos", "Rota": "Produtos" }] }, { "Nome": "Menu Teste", "MenuItem": [{ "Nome": "Menu Teste Nível 3", "MenuItem": [{ "Nome": "Página teste 3", "Rota": "PagTesteTres" }] }] } ] this.Menu = Data; } } </script>