浅谈Vue路由快照实现思路及其问题

// 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];
 // 解密并转换为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]);
  // 追加属性反向监听，监听到的属性变化都会呈现在路由上
  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});
   }
  });
 }
}

<template>
  <!-- 使用的iview库的Switch组件 -->
  <Switch v-mode="switchValue"></Switch>
</template>
<script>
 export default {
  // 配置routeShot，指定该组件的switchValue属性映射到URL中
  routeShot: ['switchValue'],
  data () {
   return {
    switchValue: false
   }
  }
 }
</script>