如何在Nuxt.js中存储来源URL（referrer URL）？

1. 修正变量引用错误 #

你代码里的localStorage.setItem("referrer", '$route.query.referrer');存在明显问题：把变量用单引号包裹后，存储的是字符串'$route.query.referrer'而非实际的来源URL值。需要去掉单引号，直接引用变量：

localStorage.setItem("referrer", this.$route.query.referrer);

另外注意第一个分支里，你判断的是this.$route.query.ref，但存储的是this.$route.query.referrer，请确认逻辑是否匹配——如果ref是推荐码，而referrer才是来源URL，需确保该参数确实存在于路由查询中。

2. 适配Nuxt.js服务端渲染特性 #

Nuxt.js包含服务端渲染阶段，而localStorage是浏览器专属API，在服务端执行会直接报错。必须确保代码仅在客户端运行，有两种常用方式：

• 方式一：用process.client判断
  在代码外层添加环境判断，确保仅客户端执行：

if (process.client) {
  // 你的存储逻辑和请求代码
}

• 方式二：放在mounted钩子中
  mounted生命周期钩子仅在客户端触发，把代码移到这里可以避免服务端执行报错。

3. 完整修正后的示例代码 #

mounted() {
  if (process.client) {
    if (this.$route.query.ref) {
      localStorage.setItem("referrer", this.$route.query.referrer);
      this.$axios
        .$post("/affiliates/createClick", {
          referral_code: this.$route.query.ref
        })
        .then(response => {
          this.click_id = response.data.id;
          console.log(this.click_id);
          const options = {
            path: "/",
            maxAge: 60 * 60 * 24 * 45
          };
          const cookieList = [
            {
              name: "affiliate_id",
              value: this.$route.query.ref,
              opts: options
            },
            { name: "click_id", value: this.click_id, opts: options }
          ];
          this.$cookies.setAll(cookieList);
        });
    } else if (this.$route.query.referrer) {
      localStorage.setItem("referrer", this.$route.query.referrer);
      console.log(this.$route.query.referrer);
      const options = {
        path: "/",
        maxAge: 60 * 60 * 24 * 45
      };
      const cookieList = [
        {
          name: "referrer",
          value: this.$route.query.referrer,
          opts: options
        }
      ];
      this.$cookies.setAll(cookieList);
    }
  }
}

额外验证点 #

• 先通过console.log(this.$route.query.referrer)确认该参数有实际值
• 如果在页面组件中使用asyncData或fetch钩子，同样需要添加process.client判断，避免服务端执行报错

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