当前位置： 首页>后端>正文

vue 路由传参相关

后端2024-04-25 11:36:15

发送与接收

A页面发送请求的代码：

// 将数组序列化为字符串，并进行编码
const array = [1, 2, 3];
const encodedArray = encodeURIComponent(JSON.stringify(array));

// 使用编码后的字符串作为参数进行路由跳转
this.$router.push({
  path: "路径",
  query: { array: encodedArray },
});

B页面接收参数的代码（建议写在mounted() {},或created() {},里）：

// 获取编码后的字符串
const encodedArray = this.$route.query.array;

// 解码字符串并将其转换回数组
const decodedArray = JSON.parse(decodeURIComponent(encodedArray));

在发送请求时，我们使用JSON.stringify()将数组转换为字符串，然后使用encodeURIComponent()对字符串进行编码。

在接收参数时，我们使用decodeURIComponent()对编码后的字符串进行解码，然后使用JSON.parse()将解码后的字符串转换回数组。

这样，就可以安全地将数组作为参数进行传递和接收。请注意，在接收参数时，需要进行错误处理和验证，以确保数据的完整性和正确性。

数据更新

在A页面带参跳转至B页面，B页面不关闭的情况下，返回A页面再次带不同的参数跳转至B页面，B页面数据不刷新

解决方法：B页面监听$route

watch: {
      $route() {
        console.log(this.$router.history);
        //监听$router.history.current.name
        if (this.$router.history.current.name == "B页面的name") {
          // 页面刷新的方法
        }
      },
    },

监听当前路由名称是否为B页面，是则执行刷新数据的方法即可

参数清除

带参数传至B页面后，不想使用浏览器F5刷新（会闪一下，效果不好），想要点击按钮手动刷新清除url中的参数

解决方法：

// 获取当前路由路径
const currentPath = this.$route.path;

// 清除参数，构建新的路由路径
const newPath = currentPath.split("?")[0];

// 使用replace方法设置新的URL，不包含参数
this.$router.replace(newPath);

首先获取当前的路由路径，然后通过使用split()方法将路径和参数部分分开，只保留路径部分。接着使用$router.replace()方法将新的URL设置为不带参数的路径。

这样，点击按钮后就可以清除URL中的参数。页面将会刷新且不再包含任何参数。


https://www.xamrdz.com/backend/3r51934007.html

相关文章：