一、背景
作为一名专业的产品经理,肯定会有这样的需求。当用户正在编辑表单,一个不小心点到了其他路由,眼看着要离开,他到底是发自内心想放弃,还是手滑?所以弹个提醒问问他,这是你真实意愿吗?(如果微博点赞也有确认框,那娱乐圈的各位大大们就没有手滑声明了\( ̄︶ ̄)/ )
场景二:当从有分页器和筛选条件的列表页,好不容易筛选出了20条数据,点进一个详情再返回时,发现刚才辛苦选择的筛选条件都置空了!!!想骂...不能骂要文明!
这时,就需要我们来做点啥子了
二、vue-router
导航守卫
vue-router
提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。
上述两种情况,使用组件级的导航守卫就可以。
情景一:
页面保存isEdit
字段,当表单信息有更新时,将isEdit
更新为true
。
路由即将离开时,提醒用户:
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
if (this.isEdit) {
const h = this.$createElement;
this.$msgbox({
title: '',
message: h('div', null, [
h('span', { style: 'color: #00BAFF' }, '您在页面编辑了未保存,是否确认离开'),
h('div', { style: 'color: #999' }, '注意:点击确认之后编辑不会生效'),
]),
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
done(); // 隐藏确认框
next(); // 向下执行
} else {
done(); // 隐藏确认框
}
},
});
} else {
next();
}
}
情景二:离开路由时将信息保存在本地,进入页面created时,可判断赋值。
export default {
methods: {},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
if (to.name === 'detail') { // 若要跳到详情页,则将分页和筛选信息存在Storage
window.sessionStorage.setItem('pageInfo', JSON.stringify(this.pageInfo));
} else { // 若不是详情页,则清楚分页信息
window.sessionStorage.removeItem('pageInfo');
}
// 执行路由跳转
next();
},
created() {
const pageInfo = window.sessionStorage.getItem('pageInfo');
this.pageInfo = pageInfo ? JSON.parse(pageInfo) : {
pn: 1,
pageSize: this.pageSizes[2],
total: 0,
};
},
};