这篇文章将为大家详细讲解有关怎么在Vue中实现路由快照，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
创新互联建站-专业网站定制、快速模板网站建设、高性价比平川网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式平川网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖平川地区。费用合理售后完善，十余年实体公司更值得信赖。
// 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});
}
});
}
}代码逻辑大致如下：
代码45行，注册该组件时，我们需要指定保存在URL query部分的键名，默认为_；同时指定绑定在组件上的拓展属性名，默认为routeShot；
代码21行，根据组件拓展属性，对这些拓展属性实施监听，将属性值的变化同步到路由中；
代码19行，在组件created阶段，获取路由参数并解析成组件属性，并将属性值同步到组件中；
代码13、25、31行对路由上的参数进行Base64的加密和解密；
组件的代码仅仅需要追加routeShot的配置即可：
