전역 라우팅 변경 사항을 관찰하고 Nuxt2에서 특정 작업을 수행합니다.

Question

Nuxt JS v2를 사용하고 있으며 페이지가 변경되고 페이지가 로드될 때마다 함수를 실행해야 합니다. 레이아웃에 경로 관찰자를 추가할 수 있다는 것을 알고 있지만 이는 모든 레이아웃에 경로 관찰자를 추가해야 한다는 것을 의미합니다. 예:

으아아아

저는 cookie-tracking.js라는 플러그인을 가지고 있고 여기에 console.log를 추가하면 페이지가 변경될 때마다 이 플러그인이 호출되기를 바랐습니다. 하지만 아니요, 이 동작이 발생하도록 하려면 무엇을 추가해야 할까요?

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

Answer 1

Nuxt2 라우터는 Vue-Router3을 기반으로 하기 때문에 push({name: ''}) 및 path('path string')代码>

을 모두 사용하는 경우

layout/default.vue

으아아아

사용 사례(cookie-tracking.js)에 따라 경로를 변경할 때 이벤트를 한 번만 실행할 수 있으므로 모든 Nuxt-Page-Component 대신 layout/default.vue에 넣을 수 있습니다. 레이아웃이 여러 개인 경우 코드를 mixin

로 리팩토링하는 것을 고려할 수 있습니다.