在没有路由器链接的 Laravel 8 中使用“vue-sidebar-menu”的问题答案

【问题标题】：Problem to use 'vue-sidebar-menu' in Laravel 8 without router-link在没有路由器链接的 Laravel 8 中使用“vue-sidebar-menu”的问题
【发布时间】：2022-01-04 14:32:58
【问题描述】：

请帮我解决这个问题。我使用 Laravel 8、Blade 模板和 Vue 3 组件创建应用程序。我在 Laravel 中有基本的路由。我想在管理面板https://github.com/yaminncco/vue-sidebar-menu 中添加漂亮的菜单。

不幸的是，我不知道如何将我的菜单结构传递给这个组件。当我使用文档中的示例时，出现错误

无法解析组件：router-link

我不在 Vue 中使用路由器。我在文档示例中看到了带有 InertiaJa 的自定义链接，但我不知道如何使用它，因为我不使用也不知道 InertiaJS。

我的简单 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: 'Main Navigation',
          hiddenOnCollapse: true
        },
        {
          href: '/',
          title: 'Dashboard',
          icon: 'fa fa-user'
        },
        {
          href: '/charts',
          title: 'Charts',
          icon: 'fa fa-chart-area',
          child: [
            {
              href: '/charts/sublink',
              title: 'Sub Link'
            }
          ]
        }
      ]
    }
  }
}
</script>
<style scoped>

</style>

【问题讨论】：

标签： laravel vue-router laravel-blade vuejs3

【解决方案1】：

好的，我找到了解决问题的方法。需要添加自己的代码，在 html 中创建\呈现简单链接

在 app.js 中添加：

/*remaining application code*/
import { createApp, h } from "vue";
const customLink = {
    name: 'CustomLink',
    props: ['item'],
    render() {
        return h('a', this.$slots.default())
    }
}

const app = createApp({});
app.component('custom-link', customLink)

/*remaining application code*/

在 Vue 组件中：

<SidebarMenu :menu="menu" :link-component-name="'custom-link'"></SidebarMenu>

【讨论】：