作为一名专业的产品经理，肯定会有这样的需求。当用户正在编辑表单，一个不小心点到了其他路由，眼看着要离开，他到底是发自内心想放弃，还是手滑？所以弹个提醒问问他，这是你真实意愿吗？(如果微博点赞也有确认框，那娱乐圈的各位大大们就没有手滑声明了(￣︶￣)/ )

场景二：当从有分页器和筛选条件的列表页，好不容易筛选出了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,

};

},

};

复制代码