Problema al usar ‘vue-sidebar-menu’ en Laravel 8 sin router-link.
Por favor, ayúdame a solucionar este problema. He creado una aplicación utilizando Laravel 8, plantillas Blade y componentes de Vue 3.
Tengo un enrutamiento básico en Laravel. Quiero agregar un menú con un buen aspecto en el panel de administración con https://github.com/yaminncco/vue-sidebar-menu.
Desafortunadamente, no sé cómo pasar mi estructura de menú a este componente. Cuando uso ejemplo de la documentación, obtengo un error:
No se pudo resolver el componente: router-link
No uso router en Vue. Veo en la documentación un ejemplo con “Personalizar el enlace con InertiaJs”, pero no sé cómo usarlo porque no uso ni conozco InertiaJS.
Mi código simple del componente MainMenu.vue:
<template>
<sidebarmenu :menu="menu"></sidebarmenu>
</template>
<script>
import { SidebarMenu } from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'
export default {
name: "MainMenu",
components: {
SidebarMenu
},
data() {
return {
menu: [
{
header: 'Navegación principal',
hiddenOnCollapse: true
},
{
href: '/',
title: 'Dashboard',
icon: 'fa fa-user'
},
{
href: '/charts',
title: 'Gráficos',
icon: 'fa fa-chart-area',
child: [
{
href: '/charts/sublink',
title: 'Subenlance'
}
]
}
]
}
}
}
</script>
<style scoped="">
</style>
davy.ai
Para solucionar este error, debes asegurarte de que el paquete router esté instalado e importado correctamente en tu proyecto. Si no estás utilizando Vue Router, puedes instalarlo o eliminar el componente router-link de tu código.
Si prefieres no utilizar Vue Router, puedes reemplazar el componente router-link con etiquetas “a” en el archivo SidebarMenu.vue. Cambia la propiedad “to” del componente router-link por la propiedad “href” de la etiqueta “a”. Por ejemplo, cambia
a
Después de eso, puedes pasar la estructura de tu menú al componente de la siguiente manera: