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

vue 路由传参相关

发送与接收

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

相关文章: