Vue中使用window.location.href传参后无法获取数据的求助

我来帮你搞定这个问题！你遇到的是Vue SPA开发里很常见的场景——既要跳转后刷新页面，又要正确传递并获取数据。咱们一步步拆解解决：

首先，为什么this.$route.query.info拿不到数据？ #

先排查几个最可能的原因：

• 如果this.info是对象/数组：直接拼到URL里会被转成[object Object]，这肯定拿不到有效数据！必须先把复杂数据转成JSON字符串再传递。
• 生命周期时机不对：如果在beforeCreate钩子里拿$route.query，这时候路由还没初始化，自然是空的，得在created或mounted里获取。
• 路由路径不匹配：确保你路由配置里toAnotherPage对应的path确实是/toAnotherPage，否则URL不对，$route.query也会是空的。

解决方案1：修复window.location.href的传参与获取逻辑 #

情况1：传递的是复杂数据（对象/数组） #

跳转时先编码数据：

// 把对象转成JSON字符串并编码，避免URL乱码
const encodedInfo = encodeURIComponent(JSON.stringify(this.info));
window.location.href = `/toAnotherPage?info=${encodedInfo}`;

目标页面在created钩子中解码解析：

created() {
  if (this.$route.query.info) {
    // 解码并转成原数据格式
    const decodedInfo = decodeURIComponent(this.$route.query.info);
    const info = JSON.parse(decodedInfo);
    console.log('拿到的数据：', info);
    // 这里写你的业务逻辑
  }
}

情况2：传递的是简单数据（字符串/数字） #

直接在目标页面的mounted或created里获取即可：

mounted() {
  const info = this.$route.query.info;
  if (info) {
    // 处理你的逻辑
    console.log(info);
  }
}

解决方案2：用Vue Router实现跳转+页面刷新 #

如果你不想脱离Vue Router的生态，又需要页面刷新，可以试试这两种方式：

方式A：跳转后手动触发页面刷新 #

注意：这种方式下params会因为页面刷新丢失，所以改用query传递参数（因为query存在URL里，刷新后不会丢）：

this.$router.push({ 
  name: 'toAnotherPage', 
  query: { info: JSON.stringify(this.info) }
}).then(() => {
  // 跳转成功后刷新页面
  window.location.reload();
});

目标页面同样按照上面的方法解析query参数就行。

方式B：监听路由变化实现组件更新（无需真刷新） #

如果不需要完全刷新页面，只是想让组件重新渲染并获取新数据，可以监听路由变化：

// 目标页面组件
watch: {
  '$route'(to) {
    // 路由变化时重新处理数据
    if (to.query.info) {
      const info = JSON.parse(to.query.info);
      this.handleInfo(info);
    }
  }
},
created() {
  // 初始化时也要处理一次
  if (this.$route.query.info) {
    const info = JSON.parse(this.$route.query.info);
    this.handleInfo(info);
  }
},
methods: {
  handleInfo(info) {
    // 这里写你的业务逻辑
    console.log('更新后的数据：', info);
  }
}

解决方案3：用本地存储传递敏感数据 #

如果数据不想暴露在URL里（比如敏感信息），可以用sessionStorage临时存储：

// 跳转前存储数据
sessionStorage.setItem('transferInfo', JSON.stringify(this.info));
// 跳转页面
window.location.href = '/toAnotherPage';

目标页面获取并清理数据：

created() {
  const infoStr = sessionStorage.getItem('transferInfo');
  if (infoStr) {
    const info = JSON.parse(infoStr);
    // 处理逻辑
    console.log(info);
    // 用完记得删除，避免残留
    sessionStorage.removeItem('transferInfo');
  }
}

内容的提问来源于stack exchange，提问作者Justin