Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

E para as rotas children?

Olá! Seguindo os conceitos aplicados, fiz uma página que, dada a url, altera o conteúdo. Queria exibir isso no menu, mas me pergunto: Como colocar apenas as rotas "filhas" no menu?

Por exemplo, tendo essas rotas:

export const routes = [
    {
        path: '/',
        name: 'validator',
        component: Validator,
    },

    {
        path: '/login',
        name: 'login',
        component: LoginScreen,
    },

    {
        path: '/company',
        name: 'company-picker',
        component: CompanyPicker,
    },

    {
        path: '/dashboard',
        name: 'Home',
        component: Application,
        icon: "home",
        children: [
            {
                path: '/home',
                name: 'Dashboard',
                component: Dashboard,
                menu: true
            },

            {
                path: '/tools',
                name: 'Tools',
                component: Tools,
                menu: true
            }
        ]
    }
];

E o componente:

<template>
    <aside class="menu-area">
        <nav class="menu">
            <ul>
                <li v-for="route in routes">
                    <router-link :to="route.path">
                        <font-awesome-icon :icon="route.icon"/>
                        {{ route.name }}
                    </router-link>
                </li>
            </ul>
        </nav>
    </aside>
</template>

<script>
    import {routes} from "../../../../routes";

    export default {
        data() {
            return {
                routes: routes.filter(route => route.menu)
            }
        }
    }
</script>

Como posso fazer isso?

1 resposta
solução!

Fala aí Leonardo, tudo bem? Você pode estar criando uma função para pegar apenas as rotas filhas, algo mais ou menos assim:

const getOnlyChildren = routes => routes.filter(route => route.some(r => !!r.children))

Ai no seu v-for você faz baseado no children.

Obs: Pode ser que tenha algum problema na função, não testei ela, acabei de escrever.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software