web-dev-qa-db-ja.com

Vuejs：ルート変更前に確認ダイアログを表示

私のvueJSプロジェクトで、現在のルートが変更される前に確認ダイアログを表示したいと思います。 enter image description here

はいの場合、次の目的のルートにリダイレクトする必要があります。そうでない場合は、同じルートを維持します。

それを達成する方法はありますか？

前もって感謝します。

javascriptvue.jsvuejs2vue-componentvue-router
9
Sagar Kharche

In-Component GuardsbeforeRouteLeaveを使用できます。 https://router.vuejs.org/en/advanced/navigation-guards.html を参照してください。

デモ： https://codesandbox.io/s/jzr5nojn39 （ホーム、ページ1、ページ2の間を移動してみてください）

サンプルコード（確認ダイアログとして vuejs-dialog を使用）：

_    beforeRouteLeave (to, from, next) {
        this.$dialog.confirm('Do you want to proceed?')
        .then(function () {
            next();
        })
        .catch(function () {
            next(false);
        });
    }
_

続行する場合は、next()を使用してください。

リダイレクトをキャンセルする必要がある場合は、next(false)を使用します。

20
Jacob Goh

受け入れられた答えは vuejs-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);
    }
  }

codesandboxの実際の動作を見る

Takeawayここで重要なポイントは beforeRouteLeave ナビゲーションガードです。ここで、toの場合、ユーザーがナビゲートすることはできません。データのプロパティがnullです。 nullにできない唯一のケースは、ユーザーがダイアログの[保存]または[破棄]ボタンをクリックしたときです。

2
roli roli

VueJSにはIn Component Navigation GuardsのようなbeforeRouteUpdateとbeforeRouteLeaveがあります

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.
}
2
Nafiul Islam

次のコードは私のために働きます

 <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>
0
Atchutha rama reddy Karri