在日常的開發過程中,我們常?;崤齙秸庋男棖?,當我們在某個編輯頁面,不小心點到了其他鏈接,希望彈出一個提示框,詢問用戶是否退出當前頁面,等用戶點擊確認后再跳轉。防止造成已填寫的數據未保存。這篇筆記主要記錄在vue項目中,在組件內部如何實現該功能。


小呆的項目,目前用的是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實例的特性來實現功能。具體如下:

  1. 在觸發該函數的時候,把路由信息存入data中。
  2. 判斷路由開關,是否允許跳轉頁面,如果flag為false,我們將dialog彈出顯示出來,詢問用戶是否退出,并阻止頁面跳轉。如果為true,跳轉頁面。
  3. 當點擊彈窗的確認按鈕時,我們改變flag的狀態,同時利用$router.push跳轉頁面(此時用到了剛才存放的路由信息)
  4. 這時beforeRouteLeave函數會再次執行,此時flag為true,成功跳轉頁面。

本篇筆記的內容到此就結束了,你學會了嗎?如果覺得文章對你有用,可以點個贊喲~