在Web應用程序中，用戶經常需要添加、編輯或刪除數據。 在這些操作的過程中，有時候會有用戶需要在數據被修改后，但是在提交前離開當前頁面的情況。 對于這種情況，一個完善的Web應用應該給用戶一個未保存的提示，以防止用戶無意中丟失他們的修改。 然而，對于使用Vue.js的Web應用，該如何實現這種未保存提示呢？

在Vue.js中，我們可以使用一個mixin來實現未保存提示。 mixin是Vue.js提供的一種機制，可以在多個組件之間共享代碼。 我們可以定義一個mixins對象，其中包含了beforeRouteLeave方法和mounted方法。 在beforeRouteLeave方法中，我們可以檢查數據是否被修改并根據情況彈出未保存提示。 在mounted方法中，我們可以監聽數據的變化，以便在用戶修改數據時發出未保存提示。

const UnsavedPromptMixin = {
data() {
return {isDirty: false};
},
methods: {
confirmNavigation(cb) {
if (this.isDirty) {
const answer = window.confirm('您的更改未保存。您確定要離開此頁面嗎？');
if (answer) {
this.isDirty = false;
cb(true);
} else {
cb(false);
}
} else {
cb(true);
}
}
},
mounted() {
this.$watch(
() =>this.$data,
() =>this.isDirty = true,
{deep: true}
);
}
}

有了mixins對象之后，我們就可以在需要未保存提示的組件中混入該mixins對象。 在這些組件中，我們只需要重寫beforeRouteLeave方法，然后將其添加到組件路由配置中即可。

const MyComponent = {
mixins: [UnsavedPromptMixin],
methods: {
saveData() {
// 保存數據
this.isDirty = false;
}
},
beforeRouteLeave(to, from, next) {
this.confirmNavigation(next);
}
}
const routes = [
{path: '/my-component', component: MyComponent},
];

現在，當用戶在MyComponent組件中修改數據并嘗試離開頁面時，會彈出未保存提示。 在用戶決定離開還是留下的時候，我們會調用confirmNavigation回調函數以決定路由是否可以繼續進行。

總的來說，使用Vue.js實現未保存提示非常簡單。 我們只需要創建一個mixin對象、在需要提示的組件中混入mixin對象、重寫beforeRouteLeave方法并將其添加到路由配置中即可。 這樣可以為用戶提供更好的用戶體驗，防止他們無意中丟失數據。