前端页面路由跳转方式详解

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

• 第一种方式：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'：一个点开头表示相对于当前路径进行路由导航。