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?