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

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

  • 第一种方式: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代码如下:

进入学生信息界面

4.routerLink

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

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

html代码如下:

进入学生信息界面

routerLink的几种写法:

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

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

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

你可能感兴趣的:(typescript,javascript,angular,前端,html,javascript,typescript,angular)