使用Javascript在Angular中的RouterLink

Question

我试图在HTML中使用类似于routerLink的javascript方法，但使用Javascript。

我已尝试使用window.location，但结果不一样，因为此命令会刷新网站以从一个URL跳转到另一个URL。是否有可能像routerLink那样从一个组件跳到另一个组件（不刷新）？

解

我在问router.navigateByUrl('/url')

Answer 1

routerLink的指令内部实现不使用window.location API，而是window.history API，window.history.pushState()函数更精确（Source）。

每个SPA框架都是如此。

Answer 2

这是window.location.hash你可以改变而不重新加载。如果您不想与history.pushState()混淆，那也可用于创建SPA

window.addEventListener( 'hashchange', event => {
  console.log( `should render page: ${ window.location.hash }` )
});

<a href="#/home">Home</a>
<a href="#/page1">Page 1</a>
<a href="#/page2">Page 2</a>
<a href="#/page3">Page 3</a>

与history.pushState()相比，这确实有其他缺点，如搜索引擎优化等。但这是进行单页面应用程序路由的最简单方法。如果它足够或不满足，那么有点取决于你正在建造什么。

如果你正在使用角度，只需使用路由角度提供。