Jiang's Tech Journal

Jiang's Tech Journal

首页
分类
关于
Login →
Jiang's Tech Journal

Jiang's Tech Journal

首页 分类 关于
Login
  1. Home
  2. Vue
  3. Vue-Router中Query传值简单加密

Vue-Router中Query传值简单加密

0
  • Vue
  • Published at 2024-09-23
  • Read 125 times
Jiang
Jiang
Table of Contents
No Table of Contents
//由于url有长度限制,所以这个解决方案不能携带太多参数
router.push({
  name: "Consumption",
  query: encodeURIComponent(
    btoa(JSON.stringify({ id: data.id, name: data.name }))
  ),
});
//跳转到的页面
 const query = router.currentRoute.value.query; // 获取当前路由的 query 参数
 const decodedQuery = JSON.parse(
  decodeURIComponent(atob(query)) // 解码 query
);

console.log(decodedQuery); // { id: data.id, name: data.name }

如果需要更麻烦的加密的话,用crypto-js 实现更复杂的加密方法。

https://www.npmjs.com/package/crypto-js

加密只是增加了破解所需要的成本和时间

Related Posts

【Vue】VueUse 中 createReusableTemplate 的妙用

在 Vue 3 开发中,虽然推荐使用模板语法,但在封装高阶组件或使用特定 UI 库(如 Naive UI、Element Plus、Ant Design Vue)的表格组件时,我们往往需要编写 Render 函数(h 函数)或使用 JSX/TSX 来处理复杂的自定义列渲染。 对于不熟悉渲染函数 AP

【Vue】 组件内模板复用技巧:createReusableTemplate

在 Vue 组件开发中,我们经常遇到部分模板内容需要在同一组件内多次复用的场景。传统的解决方案如提取子组件、v-for 循环或直接复制粘贴,在某些简单场景下可能显得过于繁琐或冗余。 本文介绍一种利用 Vue 3 组合式 API 和渲染函数特性实现的“局部模板复用”技巧,类似于模板引擎中的“宏(Mac

【Vue】组件二次封装技巧

日常任务开发过程中避免不了进行 UI 组件库部分组件的二次封装使用,记录下长期开发过程中积累的一些经验和网络学习的新技巧,组件二次封装需要解决的无非就是属性 props 如何透传出去,如何复用原有组件的插槽,以及如何调用原组件暴露的方法,这里以比较热门的 UI 框架 Element Plus 为例。

【vue-admin-kit】配置驱动的 Vue 3 后台管理组件工具套件

📖 在线文档:https://vue-admin-kit.jiang.in/ 前言 在企业级后台管理系统开发中,CRUD 页面占据了大量的开发工作。搜索表单、数据表格、新增/编辑弹窗、详情展示……这些重复性的工作不仅耗时,还容易产生不一致的代码风格。 vue-admin-kit 正是为解决这一痛点

[Vue] 一种全新的弹窗写法!

<script lang="ts" setup> import { ElDialog, ElButton } from 'element-plus'; // 上传类型Ref const gatherUploadRef = ref<HTMLElement>(); // 2 , 3 // 切换上传类型

Vue-Router中Query传值简单加密

//由于url有长度限制,所以这个解决方案不能携带太多参数 router.push({ name: "Consumption", query: encodeURIComponent( btoa(JSON.stringify({ id: data.id, name: data.name

Table of Contents
No Table of Contents
Copyright © 2024 your company All Rights Reserved. Powered by Halo.