1.this.$router.push()

描述:跳转到指定url路径,并向history栈中添加一个记录,点击后退会返回到上一个页面。

// 1字符串
this.$router.push('/user/order')
// 2对象
this.$router.push({ path: '/user/order' })
//3传参
this.$router.push({ path: '/user/order', query: {id: 123} })
//3-1取参数
this.$route.query.id
//4命名的路由
this.$router.push({ name: '/user/order', params: {id: 123} })
//4-1取参数
this.$route.params.id

2.this.$router.replace()

描述:跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上个页面 (直接替换当前页面)。

3.this.$router.go():原页面表单中的内容会丢失

this.$router.go(-1):后退+刷新;

this.$router.go(0):刷新;

this.$router.go(1) :前进

4.this.$router.back(): 原页表表单中的内容会保留;

this.$router.back(-1):后退 ;

this.$router.back(0) 刷新;

this.$router.back(1):前进

需求一:
a页面 push到 b页面, b页面 push到 c页面,c页面 replace到 b页面,这时候点击按钮(router.go(-1)),没有效果,需点击两次才能返回到a页面中!

分析:
页面跳转流程: a => b => c => b
路由栈:a => b => b
就路由栈说明:栈中b页面替代了c页面,所以路由栈中不存在c路由,因此在我们在点击第一次返回后,其实是从一个b页面返回到另一个b页面

方案一:
在点击使用replace的代码后面添加一条路由返回的代码 (推荐使用)

this.$router.replace('/你的路由名字')
this.$router.go(-1)   //重点

在这里插入图片描述

query: {
// replace: true
}

存在的问题,如果当前页面通过replace页面生变化,那么返回上一级页面 fullPath会携带参数, 并且使用 this.$router.go(-1) 返回上一级页面时地址栏没参数,query中还是有携带的参数

如何更好的使用replace,push,最终返回的都是 push 之前的地址

如下三个页面,分别对应不同的状态

  • list页面

  • add新增页面

  • see查看页面

  • push = this.$router.push

  • replace = this.$router.replace

  • 返回 = this.$router.back(-1)

举例

1、list页面 -->  add页面 --> 提交审核(跳转see页面) --> see页面 --> 返回(this.$router.back(-1))
			push		replace  			
	路由地址总共保存了一条: list页面 --> add页面 (因为 push 向history栈中添加一个记录)
2、list页面 -->  see页面 --> 编辑(add页面) --> 保存  --》 返回(this.$router.back(-1))
			push		replace				replate
	路由地址总共保存了一条: list页面 --> add页面 (因为 push 向history栈中添加一个记录)	 
  

注意: replace 不会在history栈中记录,可直接跳转上一页面

参考链接:https://www.pudn.com/news/6228d3bb9ddf223e1ad1b27b.html
参考链接:https://www.jianshu.com/p/716f72873734

Logo

前往低代码交流专区

更多推荐