這篇文章將為大家詳細講解有關(guān)怎么在Vue中實現(xiàn)路由快照，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、三亞網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、商城建設(shè)、集團公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為三亞等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

// router-snapshot.js
// https://github.com/dankogai/js-base64
import { Base64 } from 'js-base64';

function beforeRouteEnterHandler (vm, {key, ext}) {
 // 獲取路由綁定字段
 const routeBindKeys = vm.$options[ext] || [];
 // 獲取路由綁定部分的加密字符串
 const routeParamsString = vm.$route.query[key];
 // 解密并轉(zhuǎn)換為JSON
 let routeParamsJSON;
 try {
  routeParamsJSON = JSON.parse(Base64.decode(routeParamsString));
 }catch (e) {
  routeParamsJSON = {};
 }
 routeBindKeys.forEach(attr => {
  // 使用vue的是指方式，若瀏覽器沒有緩存值，則獲取組件默認值
  vm.$set(vm, attr, routeParamsJSON.hasOwnProperty(attr) ? routeParamsJSON[attr] : vm[attr]);
  // 追加屬性反向監(jiān)聽，監(jiān)聽到的屬性變化都會呈現(xiàn)在路由上
  vm.$watch(attr, (value) => {
   const query = vm.$route.query;
   let routeSnapshotValueJSON;
   try {
    routeSnapshotValueJSON = JSON.parse(Base64.decode(query[key]));
   }catch (e) {
    routeSnapshotValueJSON = {};
   }
   routeSnapshotValueJSON[attr] = value;
   const extendQuery = {};
   extendQuery[key] = Base64.encodeURI(JSON.stringify(routeSnapshotValueJSON));
   vm.$router.push({
    query: { 
     ...query,
     ...extendQuery
    }
   })
  }, {
   deep: true
  });
 })
}

export default {
 install (Vue, {key = '_', ext = 'routeShot'} = {}) {
  Vue.mixin({
   // beforeRouteEnter (to, from, next) {
   //  console.log('beforeRouteEnter', to, from)
   //  next(beforeRouteEnterHandler)
   // }
   created () {
    beforeRouteEnterHandler(this, {key, ext});
   }
  });
 }
}

代碼邏輯大致如下：

1. 代碼45行，注冊該組件時，我們需要指定保存在URL query部分的鍵名，默認為_；同時指定綁定在組件上的拓展屬性名，默認為routeShot；

2. 代碼21行，根據(jù)組件拓展屬性，對這些拓展屬性實施監(jiān)聽，將屬性值的變化同步到路由中；

3. 代碼19行，在組件created階段，獲取路由參數(shù)并解析成組件屬性，并將屬性值同步到組件中；

4. 代碼13、25、31行對路由上的參數(shù)進行Base64的加密和解密；

組件的代碼僅僅需要追加routeShot的配置即可：

經(jīng)過這樣，無論你怎么刷新頁面，被快照的屬性都不會發(fā)生改變。另外，除了data屬性，prop、computed屬性也是可以綁定到URL上的。

什么時候用最適合？

目前來說，應(yīng)用場景中最多的還是非安全性表單以及不需要持久化的數(shù)據(jù)。舉幾個例子：

1. 表格中篩選項有很多的情況下，用戶進行了大量的選擇和填寫操作，結(jié)果因為網(wǎng)絡(luò)原因?qū)е抡埱笫　４W(wǎng)絡(luò)恢復(fù)后，用戶重新刷新頁面，先前的操作必須重新執(zhí)行；一般情況中，用戶不會隨意更改瀏覽器的URL，在這種條件下，用戶的刷新不影響上下文的環(huán)境，能給用戶帶來一定便利；

2. 之前代碼示例中，開關(guān)組件的值不交予服務(wù)端進行持久化，也是可以使用這種方式來保存操作的；

存在的問題

寫完這個插件，面臨了三個我認為比較重要的問題：

1. 性能問題： 通過代碼47-50行可以看出，早期設(shè)計是將插件應(yīng)用在路由組件中的，但是在后期的測試和使用中，發(fā)現(xiàn)還有很多組件不是注冊在路由中的，也就是父子組件，這樣的組件無法被路由鉤子攔截到，因此就將該函數(shù)混入到了所有組件的created函數(shù)中。當應(yīng)用越來越大、組件越來越多的時候，這個性能未免有點令人擔(dān)憂；

2. 持久性問題： 當URL的query部分越來越大的時候，超過了URL的長度限制，那么組件屬性的持久性將會被中斷。但我們并不能保證該長度不會超過，這隨著應(yīng)用的增長是無法預(yù)料的。在前端中，我們沒有找到對應(yīng)的庫能進行定長加密解密，如果能找到，這個或?qū)⒈唤鉀Q；

3. 安全性問題： 一直找不到比較安全的加密解密方式，而且我覺得這樣做是會有安全隱患，但不知道究竟哪種場景會讓這種安全性問題暴露的大；

關(guān)于怎么在Vue中實現(xiàn)路由快照就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站題目：怎么在Vue中實現(xiàn)路由快照-創(chuàng)新互聯(lián)
文章出自：http://weahome.cn/article/doshed.html