快速开发四(加密和解密)和页面回退

页面加解密传值

有时候处理复杂业务逻辑,需要在页面之间传递一些敏感信息,比如用户信息,订单信息等,但是又不想在页面之间传递明文,所以需要对传递的信息进行加密,然后在页面之间传递加密后的信息,在接收端解密后再使用.

提示

useRouter 路由器实例，负责「操作路由」
useRoute 当前路由对象，负责「读取当前页面信息」

加密

示例:

//系统
import { useRouter } from "vue-router";
//工具
import { encryptData } from "@/utils/crypt";

//初始化路由
const router = useRouter();

const encryptString = encryptData('{"id":1,"name":"张三"}');
    router.push({
      name: "RouteName",
      query: { key_word: encryptString }, 
    });

解密

示例:

//系统
import { useRoute } from "vue-router";
//工具
import { decryptData } from "@/utils/crypt";
//初始化路由
const route = useRoute();
//解密前先判断`route.query.key_word`是否存在
//解密
const keyWordObject = decryptData(route.query.key_word as string);

页面回退

import { useTagsViewStore } from "@/store";
const tagsViewStore = useTagsViewStore();

//执行完操作以后
// 关闭当前标签页并返回列表
tagsViewStore.closeCurrentView();