如何解决带有 vaadin 路由器和处理页面刷新的 vanilla js web 组件中的嵌套路由
我有一个简单应用程序的嵌套页面布局。 app-layout
我正在尝试将嵌套的子组件加载到它们的特定目标插座中。
vaadin 路由器仅提供一种插座配置。这意味着我的所有路线都将呈现在一个 div 中。
稍微调整一下,我就可以动态设置路由渲染目标,并且可以正常工作,但是在重新加载页面时会失败。
这是我的 vaadin 调整动作功能
// a custom function to set/change the render target at runtime
const setViewPort = async (context,commands) => {
console.log(window.performance.getEntriesByType("navigation")[0].entryType);
if(context?.route?.parent?.component){
let elm = await document.querySelector(context.route.parent.component);
let outlet = await elm.shadowRoot.querySelector(context.route.viewport);
await context.resolver.setOutlet(outlet);
} else {
let outlet = await document.querySelector(context.route.viewport);
await context.resolver.setOutlet(outlet);
}
return true;
}
这是路由器配置
import {Router} from 'https://unpkg.com/@vaadin/router';
const outlet = document.getElementById('outlet'); //default outlet
const router = new Router(outlet);
router.setRoutes([
{
path: '/',name: 'home',viewport: 'div#outlet',// extra custom attributes added for runtime check
action: setViewPort,component: 'home-view'
},{
path: '/list',name: 'itemsList',component: 'item-list',renderTarget: 'some-div',children:[
{
path: '/',name: 'itemHome',action: setViewPort,component: 'item-list'
},{
path: 'inbox',name: 'email-inbox',component: 'in-box'
},{
path: 'sent',name: 'sent-emails',component: 'sent-mails'
},{
path: 'trash',name: 'trash',component: 'trash-bin'
}
]
}
]);
所有这些组件都是带有 shadow dom 的简单 vanilla js web 组件。
此 hack 有效并将单击的项目呈现到其目标 div 中,但在页面重新加载时,根级路由工作正常,但是嵌套路由会引发此错误
Uncaught (in promise) TypeError: Cannot read property 'shadowRoot' of null
at Object.setViewPort [as action]
知道如何修复它吗?改善了吗?还是处理嵌套渲染的更好方法?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。