Beobachten Sie globale Routenänderungen und führen Sie bestimmte Vorgänge in Nuxt2 aus

Question

Ich verwende Nuxt JS v2 und muss bei jedem Seitenwechsel und Laden einer Seite eine Funktion ausführen. Ich weiß, dass ich dem Layout einen Routenbeobachter hinzufügen kann, aber das bedeutet, dass er zu jedem Layout hinzugefügt werden muss. Ich habe viele, wie zum Beispiel:

<script>
export default {
  watch: {
    $route(to, from) {
      console.log('route change to', to)
      console.log('route change from', from)
    }
  }
}
</script>

Ich habe ein Plugin namens cookie-tracking.js und hatte gehofft, dass es bei jedem Seitenwechsel aufgerufen wird, wenn ich ein console.log hinzufüge, aber nein, was könnte ich hinzufügen, um dieses Verhalten zu bewirken:

export default ({ app, route }, inject) => {
  console.log('run on each page change...')
}

Answer 1

由于 Nuxt2 路由器基于 Vue-Router3，因此当您同时使用 push({name: ''}) 和 路径('路径字符串')代码>

布局/default.vue

// https://v3.router.vuejs.org/api/#route-object-properties
computed: {
    fullPath() {
        return this.$route.fullPath;
    },
    path() {
        return this.$route.path;
    }
},
watch: {
    // /a/b?c=d => /a/b?c=e will trigger this
    fullPath(newFullPath) {
        // do something
    },
    // /a/b => /a/c will trigger this, the above won't
    path(newPath) {
        // do something
    }
}

// or just watch with quote

watch: {
    '$route.fullPath'(newFullPath) {
        // do something
    },
}

考虑到您的用例（cookie-tracking.js），您可能在更改路径时仅触发一次事件，因此您可以将其放入layout/default.vue 而不是每个 Nuxt-Page-Component，如果您有多种布局，您可以考虑将代码重构为 mixin