vue 路由返回处理
case1: 在路由跳转之前做监听处理// 回退事件监听,可以放在路由Router.beforeEach/beforeRouteLeave 里面window.addEventListener('popstate', () => {// 相关处理,阻止返回上一级或者跳转其他页面},false)case2: 取消路由历史记录this.$router.replace({path: '/conten
·
case1: 在路由跳转之前做监听处理
// 回退事件监听,可以在路由Router.beforeEach/beforeRouteLeave 里面加条件做判断处理
created () {
// 添加页面返回监听
window.addEventListener('popstate', this.goBack, false)
},
destroyed () {
// 移除监听事件
window.removeEventListener('popstate', this.goBack, false)
},
beforeRouteLeave (to, from, next) {
this.$destroy() // 保证触发destroy事件
next()
}
// 有时候发现返回监听事件没有生效,为啥?打印输出一看,destroyed() 在 goBack()之前执行了,所以还得在destroyed()里面做适当的延时处理
case2: 控制路由历史记录的返回
this.$router.replace({
path: '/content',
query: {
searchVal: val
}
})
this.$router.go(-1) // 处理返回需要点两次的问题
// 如果进入路由层级>1, 可以在router.beforeEach中记录要监控的路由层级,然后进行返回处理
// 我的需求为,要选择多级部门下面的人,然后返回(仿照企业微信的选人页面)
router监听:
let saveTaskSelectEnter = 0
router.beforeEach(to, from, next) {
if (to.name == 'departments') {
// 记录进入部门路由层数
saveTaskSelectEnter ++
console.log('saveTaskSelectEnter---', saveTaskSelectEnter)
UseLocalStorage.setItem('saveTaskSelectEnter', saveTaskSelectEnter) // 把它存在localStorage
}
}
控制返回的函数:
beSureSel () {
const taskSelectEnter = UseLocalStorage.getItem('saveTaskSelectEnter') || 0
this.$router.replace({name:'taskAdd', params: {
userDepartment: this.choosedUser,
departmentList: this.choosedDepart
}})
this.$router.go(0 - taskSelectEnter - 1)
}
$router.push 和 $router.replace 的区别:
- $router.push({path:‘home’});本质是向history栈中添加一个路由,在我们看来是切换路由,但本质是在添加一个history记录
- $router.replace({path:‘home’});替换路由,没有历史记录,点击返回,会跳转到上上一个页面
更多推荐
已为社区贡献6条内容
所有评论(0)