使用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,有没有更好的方法来设置路由组件?
我想一个更好的解决方案可能是像这样仅在index.js中导入app-router:
import './app-router.js';
没有事件监听器和initRouter()函数。
然后因为index.js已经导入了模块,只需添加:
<app-router></app-router>
至index.html。这使您可以灵活地指定要进行路由的位置,该位置可以位于页面顶部,也可以不在页面顶部。