前端页面路由跳转方式详解
本文总结以下几种前端页面路由的跳转方式:1.navigate;2.window.open;3.document.getElementById("a标签id").click();4.routerLink。
本文总结以下几种前端页面路由的跳转方式:
- 第一种方式: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':一个点开头表示相对于当前路径进行路由导航。
更多推荐
所有评论(0)