Javascript Vuejs：更改路线前显示确认对话框

在我的vueJS项目中，我希望在当前管线更改之前显示确认对话框。

在“是”上，它应该重定向到下一个所需的路由，否则将其保持在同一路由上

你知道如何实现吗

---

提前感谢。

VueJS具有组件内导航保护如

路由更新前

和

路由更新前

beforeRouteEnter (to, from, next) {
  // called before the route that renders this component is confirmed.
  // does NOT have access to `this` component instance,
  // because it has not been created yet when this guard is called!
},
...
beforeRouteLeave (to, from, next) {
  // called when the route that renders this component is about to
  // be navigated away from.
  // has access to `this` component instance.
}

---

在路由删除之前，您可以在组件保护中使用

。看

演示：（尝试在主页、第1页和第2页之间导航）

示例代码（用作确认对话框）：

如果应该继续，请使用
next（）

如果应该取消重定向，请使用
next（false）
以下代码对我有效

 <v-btn @click="deleteDialog = true">Delete</v-btn>
      <v-dialog v-model="deleteDialog" max-width="500px">
       <v-card>
               <v-card-title style="font-size:20px" >Are you sure you want to archive?</v-card-title>
               <v-card-actions>
                   <v-spacer></v-spacer>
                   <v-btn color="red" style="font-size:15px" flat @click.native="deleteDialog = false">No</v-btn>
                   <v-btn color="green" style="font-size:15px" flat @click.native="deleteItem">Yes</v-btn>
               </v-card-actions>
           </v-card>
       </v-dialog>

删除
您确定要存档吗？
不
对

被接受的答案显示了如何使用。但如果您不想使用此库，请检查以下内容：

假设您有一个包含3个选项的对话框：

关闭对话框=>调用
closeDialog（）
并保持在同一页面中

保存更改=>调用
saveChanges（）
保存更改并导航离开

放弃更改=>调用
discardChanges（）
导航而不保存更改

  data: () => ({
    to: null,
    showDialog: false
  }),

  beforeRouteLeave(to, from, next) {
    if (this.to) {
      next();
    } else {
      this.to = to;
      this.showDialog = true;
    }
  },

  methods: {
    closeDialog() {
      this.showDialog = false;
      this.to = null;
    },

    saveChanges() {
      // add code to save changes here
      this.showDialog = false;
      this.$router.push(this.to);
    },

    discardChanges() {
      this.showDialog = false;
      this.$router.push(this.to);
    }
  }


Takeaway这里的关键Takeaway是导航卫士，如果数据中的
to
属性为空，我们不允许用户导航离开。唯一不能为空的情况是，用户单击对话框中的“保存”或“放弃”按钮。
是否可以将其实现为mixin？@lbris答案是肯定的。我将在新项目中处理此问题。由于mixin机制，如果我可以在一行中调用任何组件，效果会更好。
  data: () => ({
    to: null,
    showDialog: false
  }),

  beforeRouteLeave(to, from, next) {
    if (this.to) {
      next();
    } else {
      this.to = to;
      this.showDialog = true;
    }
  },

  methods: {
    closeDialog() {
      this.showDialog = false;
      this.to = null;
    },

    saveChanges() {
      // add code to save changes here
      this.showDialog = false;
      this.$router.push(this.to);
    },

    discardChanges() {
      this.showDialog = false;
      this.$router.push(this.to);
    }
  }