Entrar Ainda não tem acesso?
1
resposta

Rotas

Referente ao curso Vue.js parte 1: construindo Single Page Applications, no capítulo Um pouco mais sobre componentes e atividade Eventos customizados

por Leveditor
| 124.1k xp | 228 posts

Boa noite, estou fazendo umas rotas e gostaria de saber como diminuir os li

<li class="nav-item">
                            <router-link to="/lugar">Teste1</router-link>
                        </li> 

                        <li class="nav-item">
                            <router-link to="/cidade">Teste2</router-link>
                        </li> 

                        <li class="nav-item">
                            <router-link to="/foto">Teste3</router-link>
                        </li>

cada router esta levando para outro lugar mais como diminuir esses li usando o v-for?

1 resposta
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Leveditor, tudo bem? Você poderia criar um array de objetos dentro do data do seu componente e percorrê-lo para montar as rotas, algo mais ou menos assim:

data() {
    return {
        routes: [
            { path: '/lugar', name: 'Teste1' },
            { path: '/cidade', name: 'Teste12 },
            { path: '/foto', name: 'Teste3' },
        ]
    }
}

<li class="nav-item" v-for="route in routes">
    <router-link :to="route.path">{{ route.name }}</router-link>
</li>

A ideia seria mais ou menos essa, pode ser que precise ajustar alguma coisa, não testei o código.

Espero ter ajudado.