Observez les changements d'itinéraire global et effectuez certaines opérations dans Nuxt2

Question

J'utilise Nuxt JS v2 et j'ai besoin d'exécuter une fonction à chaque changement de page et chargement de page, je sais que je peux ajouter un observateur d'itinéraire dans la mise en page, mais cela signifie qu'il doit être ajouté à chaque mise en page, j'en ai plusieurs, tel que :

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

J'ai un plugin appelé cookie-tracking.js et j'espérais que si j'y ajoutais un console.log, il serait appelé à chaque changement de page, mais non, que pourrais-je ajouter pour que ce comportement se produise :

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

Answer 1

Puisque le routeur Nuxt2 est basé sur Vue-Router3, lorsque vous utilisez à la fois push({name: ''}) et path('path string')代码>

layout/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
    },
}

Compte tenu de votre cas d'utilisation (cookie-tracking.js), vous ne pouvez déclencher l'événement qu'une seule fois lors du changement de chemin, vous pouvez donc le mettre dans layout/default.vue au lieu de chaque Nuxt-Page-Component, si vous avez plusieurs mises en page, vous pourriez envisager de refactoriser votre code en mixin