在共享模块组件中使用路由器插座？

Question

我正在尝试通过在所有功能模块中共享一个公共侧边栏来标准化我的功能模块的用户体验。现在我在 Bootstrap5 中使用网格，在一些网格元素中使用路由器插座来保持美观和标准化。只要我不进入惰性功能模块中的子路由，它就可以很好地工作。

失败的原因是我所有的核心/应用程序资产都将 /lazy1 添加到他们的 uri 中。例如，我的 img 资产位于

/assets/img/pic.jpg

，但是当加载到延迟加载模块时，页面变白并且所有资产（包括 js 包）都变为 404，并带有新的 uri，如

/lazy1/assets/img/pic.jpg

.

我真的不想从共享组件中提取标准化标记。将内容放入组件/页面并让 shell 路由将它们包装在预先格式化的空间中真是太好了。

Answer 1

如果有人碰巧遇到这个奇怪的问题，你应该在你的 index.html 中添加一个 base 标签：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <base href="/" > <!-- this fixed it -->