Laravel 8无Vue Router环境使用vue-sidebar-menu报router-link错误求助

报错原因 #

Failed to resolve component: router-link 报错是因为vue-sidebar-menu组件默认使用Vue Router的router-link组件实现导航，你项目中未引入Vue Router，组件找不到对应依赖就会抛出该错误。

解决方案 #

不需要引入Vue Router或InertiaJS，直接使用组件提供的自定义链接插槽替换默认的router-link实现，用原生a标签适配你的Laravel原生路由即可，修改后的MainMenu.vue代码如下：

<template>
  <SidebarMenu :menu="menu">
    <!-- 自定义链接插槽，替换默认的router-link -->
    <template #link="{ item, isActive }">
      <a :href="item.href" :class="{ 'active': isActive }">
        <!-- 渲染菜单图标 -->
        <i v-if="item.icon" :class="item.icon"></i>
        <!-- 渲染菜单标题 -->
        <span>{{ item.title }}</span>
      </a>
    </template>
  </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>
/* 可选：自定义菜单激活状态样式 */
a.active {
  color: #1890ff;
  background: rgba(24, 144, 255, 0.1);
}
</style>

说明 #

• 插槽传入的isActive参数是组件自动判断的当前路由激活状态，可直接用来绑定激活样式
• 原有菜单结构不需要做任何修改，href属性直接填Laravel路由定义的路径即可，点击后走原生页面跳转，完全适配你当前的技术栈

内容的提问来源于stack exchange，提问作者Grzyb9k