时间戳

首页 > 解决方案 > Vaadin Router Error Uncaught (in promise) TypeError: [Vaadin.Router] Expected router outlet to be a valid DOM Node (but got null)

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

问题描述

我在我的 vue 应用程序中使用 Vaadin 路由器。下面是我正在尝试的示例：下面是我的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中添加了我的 webcomponents 脚本，如下所示：

<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不太熟悉

标签： javascriptvue.jsvaadinrouter

解决方案

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

推荐阅读