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

2024-05-14 17:23:05

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

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

前端页面路由跳转方式详解相关推荐

降低游戏陪玩平台系统前端开发复杂度的方式详解
优秀的程序员总是能优雅的组织自己的代码,编写思路清晰,组织结构划分合理,从小的功能组件,到大的模块结构,都能通过合理巧妙的搭配,化复杂为简单,并且提升游戏陪玩平台系统运行效率,提高游戏陪玩平台系统代码 ...
前端实现动画的6种方式详解
前端实现动画的6种方式详解一.总结一句话总结:一般是css样式改变加setInterval 二.[前端动画]实现动画的6种方式通常在前端中,实现动画的方案主要有6种: javascript直接实 ...
java前端长连接框架_Java中Spring Boot+Socket实现与html页面的长连接实例详解
Spring Boot+Socket实现与html页面的长连接,客户端给服务器端发消息,服务器给客户端轮询发送消息,附案例源码功能介绍客户端给所有在线用户发送消息客户端给指定在线用户发送消息服务器 ...
前端基础-HTML的的标签详解
阅读目录一.head内常用标签二. HTML语义化三. 字符实体四. h系列标签五. p标签六. img标签七. a标签八. 列表标签九. table标签十. form标签一. ...
SSO单点登录三种情况的实现方式详解
SSO单点登录三种情况的实现方式详解单点登录(SSO--Single Sign On)对于我们来说已经不陌生了.对于大型系统来说使用单点登录可以减少用户很多的麻烦.就拿百度来说吧,百度下面有很多的子 ...
python跨域攻击教学_关于python 跨域处理方式详解
因为浏览器的同源策略限制,不是同源的脚本不能操作其他源下面的资源,想操作另一个源下面的资源就属于跨域了,这里说的跨域是广义跨域,我们常说的代码中请求跨域,是狭义的跨域,即在脚本代码中向非同源域发送ht ...
技术点：前端缓存（web 缓存）详解
前端缓存(web 缓存)详解什么是 web 缓存 web 缓存主要指的是两部分:浏览器缓存和 http 缓存浏览器缓存: localStorage,sessionStorage,cookie 等等 ...
LSTM入门必读：从入门基础到工作方式详解 By 机器之心2017年7月24日 12:57 长短期记忆（LSTM）是一种非常重要的神经网络技术，其在语音识别和自然语言处理等许多领域都得到了广泛的应用
LSTM入门必读:从入门基础到工作方式详解 By 机器之心2017年7月24日 12:57 长短期记忆(LSTM)是一种非常重要的神经网络技术,其在语音识别和自然语言处理等许多领域都得到了广泛的应用. ...
php获取数据3中方式,PHP面向对象之3种数据访问方式详解（代码实例）
PHP面向对象之3种数据访问方式详解(代码实例) 本文目标掌握PHP中数据访问的3种方式的定义和作用 1.public 2.protected 3.private (一).数据访问的3种方式 1.P ...

最新文章

热门文章