webpack index.js simple-wc-router setup

问题描述 投票:0回答:1

使用webpack设置带有亮元素和simple-wc-router的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文档:https://lit-element.polymer-project.org/guide/use导入后使用组件的方式是

<app-router></app-router>

没有HTML部分,我找不到一种使用Web组件的方法,因此:document.getElementsByTagName(“ BODY”)[0] .append(approuter);

使用app-router Web组件是否有更优雅的方法?

假设我们正在使用webpack,有没有更好的方法来设置路由组件?

javascript polymer web-component es6-modules lit-element
1个回答
0
投票

我想一个更好的解决方案可能是像这样仅在index.js中导入app-router:

import './app-router.js';

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

然后因为index.js已经导入了模块,只需添加:

<app-router></app-router>

至index.html。这使您可以灵活地指定要进行路由的位置,该位置可以位于页面顶部,也可以不在页面顶部。

© www.soinside.com 2019 - 2024. All rights reserved.