Nuxt.js每次路由导航追加查询参数，双击跳转报TypeError如何解决？

你遇到的报错：

"TypeError: First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object"

是你的代码存在三处明显逻辑问题导致的：

• 路由跳转参数取值错误：fetch方法中你写的this.$router.name是无效值，$router是全局路由实例，不存在name属性，正确的当前路由名称取值是this.$route.name。传入undefined作为路由name会导致路由解析阶段拿到无效参数，最终触发类型错误。
• 存在循环触发风险：你监听了$route.query变化触发$fetch，而$fetch内部又调用$router.push修改query参数，会导致无限触发跳转逻辑。
• 无重复跳转拦截：双击会触发两次连续的$router.push调用，并发的路由跳转导致参数解析混乱，触发报错。

方案1：使用全局路由中间件实现（更推荐，逻辑更统一） #

这是实现全局路由参数自动携带的标准方案，不会出现重复触发问题：

1. 在项目middleware目录下新建keepInfo.js文件，代码如下：

export default function ({ route, redirect }) {
  // 已经存在info参数直接放行
  if (route.query.info) return
  // 取已留存的info值，可根据自己的业务逻辑调整取值来源
  const savedInfo = process.client ? localStorage.getItem('landing_info') : ''
  if (savedInfo) {
    redirect({
      name: route.name,
      query: {
        ...route.query,
        info: savedInfo
      }
    })
  }
}

2. 在nuxt.config.js中注册为全局中间件，所有路由都会自动执行：

export default {
  // 其他原有配置
  router: {
    middleware: ['keepInfo']
  }
}

3. 在布局的beforeMount钩子中添加初始参数留存逻辑：

if (this.$route.query.info) {
  localStorage.setItem('landing_info', this.$route.query.info)
}

方案2：直接修改你现有的布局代码 #

如果不想新增中间件，可直接修正你的原有代码逻辑：

<script>
export default {
  components: {
    // 你原有引入的组件
  },
  data: () => {
    return {
      landingRoute: '',
      isPushing: false // 新增跳转锁，防止重复触发
    }
  },
  fetch() {
    // 只有query为空、有留存info值、没有正在执行的跳转时才执行跳转
    if (this.isEmpty(this.$route.query) && this.landingRoute && !this.isPushing) {
      this.isPushing = true
      this.$router.push({
        name: this.$route.name, // 修正路由name取值错误
        query: { info: this.landingRoute },
      }).finally(() => {
        this.isPushing = false
      })
    }
  },

  beforeMount() {
    this.landingRoute = this.$route.query.info
    if (this.landingRoute) {
      localStorage.setItem('landing_info', this.landingRoute)
    } else {
      // 刷新页面时从本地存储取留存的info值
      this.landingRoute = localStorage.getItem('landing_info') || ''
    }
  },

  methods: {
    isEmpty(json) {
      return Object.keys(json).length === 0
    },
  },
}
</script>

注意删除原有监听$route.query的watch配置，避免循环触发跳转。

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