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...')
}
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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