在日常的开发过程中,我们常常会碰到这样的需求,当我们在某个编辑页面,不小心点到了其他链接,希望弹出一个提示框,询问用户是否退出当前页面,等用户点击确认后再跳转。防止造成已填写的数据未保存。这篇笔记主要记录在vue项目中,在组件内部如?#38382;?#29616;该功能。


小呆的项目,目前用的是element-UI,所以就以element-UI的组件为例,来实现这个功能。首先是模板部分。

<template>
<div class="stage-setting">
 <div class="stage-header">
  <i class="el-icon-arrow-left" style="cursor:pointer;" @click="$router.go(-1)"></i>
  <span>页面标题</span>
   <div class="btn-group">
   <el-button class="btn btn-primary" type="primary">保存并退出</el-button>
   <el-button class="btn" @click="$router.go(-1)">退出</el-button>
   </div>
 </div>
 <el-dialog class="close-dialog" title="提示" :visible.sync="dialogClose" width="600px">
  <div class="close-warning">
   <i class="el-icon-warning"></i>
   <span>该操作会造成当前页面数据丢失,确认离开吗?</span>
  </div>
  <span slot="footer" class="dialog-footer">
   <el-button @click="dialogClose = false">取 消</el-button>
   <el-button type="primary" @click="closeDialog()">确 定</el-button>
  </span>
 </el-dialog>
</div>

这样一个简单的弹窗和页面布局就出来了,我们通过点击按钮和icon来跳转页面。接着是js部分。

<script>
export default {
 data () {
  return {
   routerPath: '', // 路由名称
   routerFlag: false, // 路由flag
   dialogClose: false, // 退出弹窗
  }
 },
 methods: {
  /**
   * [closeDialog 退出页面]
  */
  closeDialog () {
   this.routerFlag = true
   this.$router.push({path: this.routerPath})
  }
 },
 /**
  * [beforeRouteLeave 路由拦截]
 */
 beforeRouteLeave (to, from, next) {
  this.routerPath = to.path
  if (this.routerFlag) {
   next()
  } else {
   this.dialogClose = true
   next(false)
  }
 }
}
</script>

主要看beforeRouteLeave这个函数,该函数用于导航离开该组件的对应路由时调用,也是我们触发vue的路由跳转时会调用这个函数,to是即将要去的路由信息,由于beforeRouteLeave函数可以调用vue的实例(this),所以我们可以利用这一函数和可以访问vue实例的特性来实?#27490;?#33021;。具体如下:

  1. 在触发该函数的时候,把路由信息存入data?#23567;?/li>
  2. 判断路由开关,是否允许跳转页面,如果flag为false,我们将dialog弹出显示出来,询问用户是否退出,并阻止页面跳转。如果为true,跳转页面。
  3. 当点击弹窗的确?#20064;?#38062;?#20445;?#25105;们改变flag的状态,同时利用$router.push跳转页面(此时用到了刚才存放的路由信息)
  4. 这时beforeRouteLeave函数会再次执行,此时flag为true,成功跳转页面。

本篇笔记的内容到此就结束了,你学会了吗?如果觉得文章?#38405;?#26377;用,可以点个赞哟~