vue.js - Vue 路由器链接警告

Question

大家好，我目前正在开发一个 Vuejs3 项目，并且我安装了 Primevue 我将它添加到我的 main.js 并将菜单栏导入到我的 App.vue 中。 我测试了它，我收到了这个警告，我不知道如何摆脱它，因为一切都工作正常，除了我的控制台收到垃圾邮件警告。 应用程序.vue

<template>
  <div class="card relative z-2">
    <i class="pi pi-sliders-h" @click="toggleMenu" style="font-size: 1.5rem" id="settings2" />
    <Menubar v-if="showMenu" :model="items" />
  </div>
</template>
<script>
import Menubar from 'primevue/menubar';
export default {
  name: "App",
  components: {
    Menubar,
  },
  setup() {
const showMenu = ref(false);
    const items = ref([
      {
        label: 'Colors',
        icon: 'pi pi-fw pi-palette',
        items: [
          {
            label: 'Default',
            icon: 'pi pi-fw pi-check',
            command: () => {
              updateSelectedColorPalette('default');
            },
          },
          {
            label: 'Vibrant Palette',
            icon: 'pi pi-fw pi-check',
            command: () => {
              updateSelectedColorPalette('vibrant-palette');
            },
          },
          {
            label: 'Monochromatic Palette',
            icon: 'pi pi-fw pi-check',
            command: () => {
              updateSelectedColorPalette('monochromatic-palette');
            },
          },
          {
            label: 'Contrasting Palette 1',
            icon: 'pi pi-fw pi-check',
            command: () => {
              updateSelectedColorPalette('contrasting-palette-1');
            },
          },
          {
            label: 'Contrasting Palette 2',
            icon: 'pi pi-fw pi-check',
            command: () => {
              updateSelectedColorPalette('contrasting-palette-2');
            },
          },
        ],
      },
      {
        label: 'Background',
        icon: 'pi pi-fw pi-pencil',
        items: [
          {
            label: 'white',
            icon: 'pi pi-fw pi-check',
            command: () => {
              updateBackground(false);
            },
          },
          {
            label: 'grey',
            icon: 'pi pi-fw pi-check',
            command: () => {
              updateBackground(true);
            },
          },
        ],
      }
    ]);

    function toggleMenu() {
      showMenu.value = !showMenu.value;
    }

    function updateSelectedColorPalette(value) {
      <!-- some code -->
    }

    function updateBackground(value) {
      <!-- some code -->
    }

    return {
      items,
      showMenu,
      toggleMenu,
    };
  },
};
</script>

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import "primevue/resources/themes/saga-blue/theme.css";
import "primevue/resources/primevue.min.css";
import "primeicons/primeicons.css";
import { createPinia } from "pinia";
import { plugin as VueTippy } from "vue-tippy";
import "tippy.js/dist/tippy.css";
import sharedFunctions from "./sharedFunctions.js";

const app = createApp(App)
  .use(createPinia())
  .use(PrimeVue)
  .use(VueTippy, {
    directive: "tippy",
    component: "tippy",
    componentSingleton: "tippy-singleton",
    defaultProps: {
      allowHTML: true,
    },
  });

for (const key in sharedFunctions) {
  app.config.globalProperties[key] = sharedFunctions[key];
}

app.mount("#app");

但是我收到此警告，当我将鼠标悬停在元素上时它会重新出现

[Vue warn]: Failed to resolve component: router-link
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <MenubarSub ref=fn<bound menubarRef> id=undefined class="p-menubar-root-list"  ... > 
  at <Menubar key=0 model= 
Array [ {…}, {…} ]
 > 
  at <App> runtime-core.esm-bundler.js:41

Answer 1

我有一个使用 Primevue 的单页应用程序，不需要路由器，但菜单组件提示缺少 router-link 组件，所以我解决了安装 vue-router 并仅注册此组件会出现问题:

// main.js
import { createApp } from 'vue'
import { RouterLink } from 'vue-router';
import PrimeVue from 'primevue/config';
import App from './App.vue'

// ...

const app = createApp(App);

// register router-link so Primevue doesn't complain
app.component('router-link', RouterLink);

这样，如果您不使用路由器，则无需实际设置它。