vue2:页面跳转路由上的参数的整体加密解密统一修改，不在单独页面处理

在Vue2中，如果想要对路由传参整体进行加密和解密，并且保持一致性，通常会在项目初始化或路由守卫（例如`beforeEach`钩子）中统一处理。这样做可以避免在每个单独页面都编写相同的加密解密逻辑，提高代码复用性和维护性。

以下是基本步骤：

1. **设置全局工具函数**：
创建一个自定义的加密解密函数，比如使用AES加密算法。这可以在`main.js`或其他合适的入口文件中配置。

// main.js 或其他合适位置
import crypto from 'crypto-js';

const encrypt = (plainText) => {
  const secretKey = 'your_secret_key'; // 替换为实际的密钥
  return crypto.AES.encrypt(plainText, secretKey).toString();
};

const decrypt = (cipherText) => {
  const secretKey = 'your_secret_key'; // 同上
  try {
    return crypto.AES.decrypt(cipherText, secretKey).toString(crypto.enc.Utf8);
  } catch (e) {
    console.error('Decryption error:', e);
    return null;
  }
};

2. **路由守卫处理**：
在`router.beforeEach`钩子中获取路由参数，加密后再传递到下一个组件，从组件接收到数据后再解密。

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  // ...
  beforeEach((to, from, next) => {
    const encryptedParams = Object.entries(to.query)
      .map(([key, value]) => `${key}=${encrypt(value)}`)
      .join('&');
    
    to.params = { ...to.params, encryptedParams }; // 更新路由参数

    // 解密是在目标组件内部进行
    next();
  }),
  afterEach(() => {
    // 如果需要在路由改变后解密，可以在这里操作
  }),
});