页面跳转的几种方式,实现页面跳转的方式

Vue 页面跳转的三种方式 this.$router.pushthis.$router.gothis.$router.replace

this.$router.push

想要导航到不同的 URL,则使用 router.push 方法。
这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

当点击 < router-link >时,这个方法会在内部调用,所以说,点击 < router-link :to=”…” > 等同于调用 router.push(…)。

this.$router.go

这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步。
参数为 0 时会重新加载页面,但会有短暂白屏。

this.$router.replace

跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router.replace需点两次返回的问题及解决方案:
三个页面a、b、c。a 页面push跳转至 b,b 再push跳转至 c ,c 使用replace(“b”)回到 b,然后点击 b 页面的返回键,需要点击两次才能回到a页面。
第一次点击其实并不是没有反应,而是页面返回到了首次的b页面。
这就是说,在 c 页面使用replace替换掉的是 c 页面的路由,c 页面之前的 b 页面历史记录还存在。

解决方法为在 history 记录中后退一页。

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注