本文总结以下几种前端页面路由的跳转方式:

  • 第一种方式:navigate;
  • 第二种方式:window.open;
  • 第三种方式:document.getElementById("a标签id").click();
  • 第四种方式:routerLink;

1.navigate

【说明】:navigate的效果是在当前页面直接跳转至指定路由,当前页面会被覆盖掉,而且不会对跳转后的页面数据进行刷新,也就是说,跳转后的页面显示的还是旧数据。

假设指定需要跳转的目标路由是“/class/student”。

ts代码如下:

this.router.navigate(['/class/student'])

2.window.open

【说明】:window.open的效果是打开新页面,在新页面进入指定链接并且会刷新页面数据,不论指定链接是否在已有页面中打开,window.open都会重新打开页面并进入指定链接,该方法被调用多少次,就会重新打开多少页面。

假设指定需要跳转的目标路由是“/class/student”。

ts代码如下:

window.open( window.location.host+'/class/student');

3.document.getElementById("a标签id").click();

【说明】:这种方式的效果是执行代码自动触发html中id为openStudent的a标签中的链接,进而跳转进入指定页面,这样就不用手动点击a标签的链接进入指定页面。

假设指定需要跳转的目标路由是“/class/student”。

ts代码如下:

document.getElementById("openStudent").click();

html代码如下:

<a class="btn " appClick [target]='"blank"' [routerLink]='/class/student' ><span id="openStudent">进入学生信息界面</span></a>

4.routerLink

【说明】:a标签中使用[routerLink],手动点击a标签中的链接,[routerLink]的效果是另外打开一个页面,在新页面中进入指定路由“/class/student”并且会刷新页面数据,而不是在当前页面直接跳转至指定路由,如果路由“/class/student”已经在其他页面打开,那么[routerLink]会直接跳转至路由“/class/student”对应的页面,但不会刷新页面数据。

假设指定需要跳转的目标路由是“/class/student”。

html代码如下:

<a class="btn " appClick [target]='"blank"' [routerLink]='/class/student' ><span id="openStudent">进入学生信息界面</span></a>

routerLink的几种写法:

(1).[routerLink]='/class/student':斜杠开头表示使用绝对路径进行路由导航;

(2).[routerLink]='../student':两个点开头表示相对于父路径进行路由导航;

(3).[routerLink]='./student':一个点开头表示相对于当前路径进行路由导航。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐