【Vue Router】使用router.replace尝试解决导航路径返回问题

原创 WALL-E 教程 vue 79阅读 27 天前 举报

背景

使用vue开发单页应用,如果路由控制不好,在页面返回的过程中会遇到一些尴尬的情况。

例如

  • 当前有手机端web应用,有首页(路由地址:"/index"
  • 点击首页的按钮可以进入列表页面,路由地址为"/list"
  • 列表页中有可点击的创建按钮 跳转 创建表单页,路由地址为"/create"
  • 创建表单提交成功后,跳转到详情页(路由地址:"/detail"),
  • 此时用户点击手机端的返回按钮,则页面被退回到了创建表单页("/create"),实际用户希望得到的结果是返回列表页
  • 同时如果多次进入创建表单页并提交,会在浏览器的路由历史记录中插入多条创建表单页的路由地址,导致返回操作失控

为何会出现返回失控呢?接下来介绍Vue Router中关于编程式导航的相关知识点

编程式的导航

vue router的官方文档中,一共介绍了三种router的实例方法来实现导航控制,分别为router.pushrouter.replacerouter.go

router.push

vue刚入门时常用router.push方法实现路径导航,“该方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。”(引用自官方文档)

所以当我们常用router.push进行路径跳转又不进行控制的情况下,会造成路由历史冗余甚至混乱。

再看看router.replace能为我们做什么

router.replace

跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。”(引用自官方文档)

所以我们尝试将router.replace用在路由导航的关键跳转上,减少路由历史记录的冗余。

回到我们文章开头的例子上,关键跳转就在创建表单页面提交后跳转到详情页,使用router.replace替代router.push跳转,当前的create页面地址会被替换,不会记录在history上。

通过开发者有意识的编程式导航,可以控制路由记录,预防路由混乱。

router.go

文档中关于编程式导航明明提到三种方法,为何少了一种。

最后一种方法router.go也是常用方法之一,却不是本文重点,所以不细说它的应用场景。

简单说在某些情况下使用router.go(-1)可以实现router.replace同样的效果,不会在history上留下记录。

demo地址

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复