在没有 router-link 的 Laravel 8 中使用 'vue-sidebar-menu' 的问题

Question

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

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

Failed to resolve component: router-link

我不在 Vue 中使用路由器。我在使用 InertiaJa 自定义 link 的文档示例中看到，但我不知道如何使用它，因为我不使用也不了解 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>

Answer 1

好的，我找到了解决问题的方法。需要添加自己的代码 create\render 简单 link in 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>

在没有 router-link 的 Laravel 8 中使用 'vue-sidebar-menu' 的问题

Problem to use 'vue-sidebar-menu' in Laravel 8 without router-link

laravel

laravel-blade

vue-router

vuejs3