Vaadin Router Error Uncaught (in promise) TypeError: [Vaadin.Router] Expected router outlet to be a valid DOM Node (but got null)答案

【问题标题】：Vaadin Router Error Uncaught (in promise) TypeError: [Vaadin.Router] Expected router outlet to be a valid DOM Node (but got null)Vaadin Router Error Uncaught (in promise) TypeError: [Vaadin.Router] Expected router outlet to be a valid DOM Node (but got null)
【发布时间】：2020-02-02 18:25:05
【问题描述】：

我在我的 vue 应用程序中使用 Vaadin Router。下面是我正在尝试的示例：下面是我的 App.vue

<template>

      <HelloWorld/>

</template>

<script>

import HelloWorld from './components/HelloWorld';


export default {
  name: 'App',

  components: {
     HelloWorld,
  }
};
</script>

以下是我的HelloWorld.vue：

<template>

      <div id = "outlet"></div>

</template>

<script>


import {Router} from '@vaadin/router';

const router = new Router(document.getElementById('outlet'));

router.setRoutes([
  {path: '/', component: 'my-web-component-a'},
  {path: '/other', component: 'my-web-component-other'}
]);
export default {
  name: 'HelloWorld',

};
</script>

我在此应用程序的 index.html 中添加了我的 web 组件的脚本，如下所示：

<script src = "../assets/my-web-component-a.js"></script>
<script src = "../assets/my-web-component-other.js"></script>

但是当我启动我的 vue 应用程序时，它已启动但未渲染 Web 组件并引发以下错误：

vaadin-router.js?7629:2007 Uncaught (in promise) TypeError: [Vaadin.Router] Expected router outlet to be a valid DOM Node (but got null)
    at Router.__ensureOutlet (vaadin-router.js?7629:2007)
    at Router.__addAppearingContent (vaadin-router.js?7629:2041)
    at eval (vaadin-router.js?7629:1783)

我做错了吗？我对 Vaadin

不太熟悉

【问题讨论】：

标签： javascript vue.js vaadin router

【解决方案1】：

“出口”可能位于shadow dom中，webcomponent封装了元素。因此，您可以编写下一行 this.shadowRoot.getElementById('outlet') 而不是 document.getElementById('outlet')

【讨论】：