VUE中路由变化this.$router(push\replace\go\back)

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中还是有携带的参数

方案二：
在点击后退的按钮处 添加判断，点击后还是当前页面，则再次后退

this.$router.go(-1)
setTimeout(() => {
     if (this.$route.name === 'hello') {
        this.$router.go(-1)
     }
}, 500)

list（列表页）
add/update （新建页/编辑页）
details （查看页）

需求二：list – add — details — list
问题：就是单据新增后提交审核，点击驳回，在点击右上角返回 页面返回的路径不对，返回到新建页面了（应该返回列表页）

解决方案：在 add 保存完数据后，跳转至 details 使用 this.$router.replace() 调转，不会记录路由，在由 details 页面返回会直接返回 list 页面

注意： replace 不会在路由中记录

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

代码007普通

打赏 收藏 海报 链接