Perhatikan perubahan laluan global dan lakukan operasi tertentu dalam Nuxt2

Question

Saya menggunakan Nuxt JS v2 dan perlu menjalankan fungsi semasa setiap perubahan halaman dan pemuatan halaman, saya tahu saya boleh menambah pemerhati laluan dalam susun atur, tetapi itu bermakna ia perlu ditambah pada setiap susun atur, saya mempunyai Banyak, seperti:

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

Saya mempunyai pemalam yang dipanggil cookie-tracking.js dan berharap jika saya menambahkan console.log padanya, ia akan dipanggil pada setiap perubahan halaman, tetapi tidak, apa yang boleh saya tambahkan untuk menjadikan tingkah laku ini berlaku:

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

Answer 1

Memandangkan penghala Nuxt2 adalah berdasarkan Vue-Router3, apabila anda menggunakan kedua-dua push({name: ''}) dan path('rentetan laluan')代码>

reka letak/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
    },
}

Memandangkan kes penggunaan anda (cookie-tracking.js), anda hanya boleh melancarkan acara itu sekali sahaja apabila laluan ditukar, jadi anda boleh meletakkannya dalam layout/default.vue dan bukannya setiap Nuxt-Page-Component , jika anda mempunyai berbilang reka letak, anda mungkin mempertimbangkan untuk memfaktorkan semula kod anda kepada mixin