Vue 页面跳转的三种方式
this.$router.push想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。当点击 < router-link >时,这个方法会在内部调用,所以说,点击 < router-link :to="…" > 等同于调用 router.push(…...
Vue 页面跳转的三种方式
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 记录中后退一页。
更多推荐
所有评论(0)