vue.js - NuxtJs 在每条路线导航上附加查询参数

Question

我有一个查询字符串，我需要将其附加到每个路由，以便当我单击链接时，它会抓取查询字符串并将其附加到 URL。这样，当我执行 to="route" 之类的操作时，它会自动将我的查询字符串附加到 URL。

当我单击一次时，我已经开始工作了，但是当我双击任何东西时，它会爆炸并出现以下错误

“TypeError：第一个参数必须是字符串、Buffer、ArrayBuffer、Array 或类似数组的对象”。

我每次在我的控制台中也看到这个错误，只是没有在页面上，所以我想我没有正确地做某事。

在我的default.vue页面中，我有以下内容：

<script>
export default {
  components: {
    // all the components I am using on this page
  },
  data: () => {
    return {
      landingRoute: '',
    }
  },
  fetch() {
    if (this.isEmpty(this.$route.query)) {
      const landingKey = this.landingRoute
      this.$router.push({
        name: this.$router.name,
        query: { info: landingKey },
      })
    }
  },

  watch: {
    '$route.query': '$fetch',
  },

  beforeMount() {
    this.landingRoute = this.$route.query.info
  },

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

错误发生在 client.js 堆栈跟踪看起来像这样......

"TypeError: First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object".
  at fromObject (index.js?b639:139)
  at from (index.js?b639:137)
  at Function.Buffer.from (index.js?b639:149)
  at eval (sessionLog.js?d88f:14)
  at promisfiy (utils.js?ebed:291)
  at middlewareSeries (utils.jseed:291)
  at Vue.callMiddlewear (client.js?06a0:267)
  at Vue._calle6$ (client.js05a0:267)
  at tryCatch (runtime.js?96cf:63)
  at Generator.invoke [as _invoke] (runtime.js?96cf:294) 

这是我的沙箱 https://codesandbox.io/s/nuxtjs-vuetify-forked-wrs2s?file=/layouts/default.vue

标签： vue.jsnuxt.js