webpack index.js simple-wc-router设置

Question

使用webpack设置带有lit-element和simple-wc路由器的SPA路由器的最佳方法。

我目前有这个工作，但我想知道是否有更好的方式来把所有这些放在一起。

webpack-config.js：

module.exports = ({ mode, presets }) => {
  return webpackMerge(
  {
    entry: {
    app: './src/index.js'
  },

index.js

import './app-router.js';
window.addEventListener('load', () => {
    initRouter();
});

function initRouter() {
  var approuter = document.createElement("app-router");
  document.getElementsByTagName("BODY")[0].append(approuter);
}

app-router.js

import { LitElement, html } from 'lit-element';
import { Router } from 'simple-wc-router';
import './ui/side-panel.js';
import './admin/admin-home.js';

class AppRouter extends Router(LitElement) {
    static get routes() {
        return [
        {
            path: "/admin",
            component: 'admin-home',
            import: () => {
              console.log('path /admin...');
              import(/* webpackChunkName: "adminutils" */ './admin/admin-home');
            }

        },
        {
          path: '/admin/billing',
          component: 'admin-billing',
          import: () => import(/* webpackChunkName: "adminutils" */ './admin/admin-billing')
        },

        {
          path: "*",
          component: 'not-found-view',
          import: () => import(/* webpackChunkName: "not-found-view" */ './views/not-found-view')
        }
    ];
}

这目前是可行的。但是为了使用具有路由逻辑的app-router元素，我必须附加一个HTML元素。

Per LitElement docs：https://lit-element.polymer-project.org/guide/use导入后使用组件的方法是

<app-router></app-router>

因此，我找不到使用没有html部分的web组件的方法: document.getElementsByTagName("BODY").append(approuter)；

有没有更优雅的方式来使用app-router web组件？

假设我们使用的是webpack，有没有更好的方法来设置路由组件？

Answer 1

我想一个更好的解决方案可能是只在index.js中导入应用程序路由器，如下所示：

import './app-router.js';

没有事件侦听器和initRouter()函数。

然后，由于index.js已经导入了模块，所以只需添加：

<app-router></app-router>

敬index.html。这使您可以灵活地指定希望路由发生的位置，该位置可能在页面顶部，也可能不在页面顶部。