這裡給大家分享一下vue中的一些技巧，希望對大家有用處。(話不多說上代碼)
1，vue路由攔截浏覽器後退實作表單儲存類似需求(為了防止使用者突然離開，沒有儲存已輸入的資訊。)
//在路由元件中：mounted(){},beforeRouteLeave (to, from, next) { if(使用者已經輸入資訊){ //出現彈窗提醒儲存表單，或者自動背景為其儲存 }else{ next(true);//使用者離開 }
請參考vue文檔全局鈎子群組件鈎子
2，路由懶加載寫法:
// 我所采用的方法，個人感覺比較簡潔一些，少了一步引入指派。const router = new VueRouter({ routes: [ path: '/app', component: () => import('./app'), // 引入元件 ]})// Vue路由文檔的寫法:const app = () => import('./app.vue') // 引入元件const router = new VueRouter({ routes: [ { path: '/app', component: app } ]})//前端全棧學習交流圈：866109386//面向1-3經驗年前端開發人員//幫助突破技術瓶頸，提升思維能力
3，路由的項目啟動頁和404頁面
一般項目都會設定這個，如果預設進入位址會跳到login頁面，如果你輸入的是一個沒有用的路由或者是空路由會跳轉到notFind頁面(你自己設定的404頁面)
export default new Router({ routes: [ { path: '/', // 項目啟動頁 redirect:'/login' // 重定向到下方聲明的路由 }, { path: '*', // 404 頁面 component: () => import('./notFind') // 或者使用component也可以的 }, ]})
4，setInterval路由跳轉繼續運作并沒有銷毀問題
beforeDestroy(){ //我通常是把setInterval()定時器指派給this執行個體，然後就可以像下面這麼暫停。 clearInterval(this.intervalid);},
beforeDestroy方法是生命周期裡元件銷毀前執行的鈎子函數，在離開的時候會觸發這個方法，這個方法在其他的地方也會有妙用，希望大家可以去了解一下。
5，setTimeout/setInterval this指向改變，無法用this通路VUe執行個體
這個地方大家的預設方法肯定是:
//使用變量通路this執行個體let self=this; setTimeout(function () { console.log(self);//使用self變量通路this執行個體 },1000);
其實這個地方我們可以用箭頭函數，因為箭頭函數會改變this的指向，而指向的剛好是自己的父級this，是以我們可以這樣用：
//箭頭函數通路this執行個體 因為箭頭函數本身沒有綁定this setTimeout(() => { console.log(this);}, 500);
這樣我們的this就是指向我們的vue執行個體了。
6，Vue 數組/對象更新 視圖不更新
方法一：直接使用最簡單也是最有效的方法，深拷貝對象或者數組，視圖會進行更新，不過會有一個缺點，深拷貝後的數組或者對象不是原來的那個數組或者對象，是你現在改變了之後的值。
上代碼：
你的對象或者數組=JSON.parse(JSON.stringify(你的對象或者數組))
先進行轉字元串，再轉回對象，這個就進行了一個拷貝的過程，會觸發視圖的改變，同時也進行了一個數組的替換，有利有弊。
方法二：this.$set(你要改變的數組/對象，你要改變的位置/key，你要改成什麼value)
this.$set(this.arr, 0, "OBKoro1"); // 改變數組this.$set(this.obj, "c