Vue路由器链路警告

mwg9r5ms  于 2023-05-29  发布在  Vue.js
关注(0)|答案(1)|浏览(134)

大家好,我目前正在做一个Vuejs3项目,我安装了Primevue,我把它添加到我的main.js,并把Menubar导入到我的App.vue。我测试了它,我得到了这个警告,我不知道我如何才能摆脱它,因为一切都工作得很好,除了我的控制台得到垃圾邮件的警告。App.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
plicqrtu

plicqrtu1#

您在代码中的某个地方使用了RouterLink组件,该组件是VueRouter库的一部分。如果您不使用它,则需要将其从代码中删除(尝试检查App.vue),如果Primevue组件需要它,则需要添加VueRouter。

相关问题