[VueJS] NuxtJS에서 url(page) 변경할 때마다 route 체크 방법

NuxtJS로 만든 웹 사용 중 페이지가 변경될 때마다(URL이 변경될 때마다) 특정 이벤트를 발생시키고 싶어서 찾아봄.

watch를 쓰면 될 것 같긴 했는데 마땅한 방법이 생각 안 나서 찾아봤었는데

방법이 정말 간단했었다.

---

watch: {
    $route(route) {
      console.log('$route : ', route);
    }
  }

방법은 이렇고 페이지를 이동할 때마다 console.log를 찍히는 걸 보면 이렇다.

---

이걸 이용해 만들어 본건 vuetify의 v-app-bar 안에 v-breadcrumbs를 써서 페이지를 이동할 때마다 페이지의 제목을 표시하고 싶어서 사용해봤었다.

이런 식으로 사용이 가능하다.

 

소스 일부분은 이렇다.

<template>
  <v-breadcrumbs
    :items="breadcrumbs"
    large
    >
    <template v-slot:divider>
      <v-icon>mdi-chevron-right</v-icon>
    </template>
  </v-breadcrumbs>
</template>

<script>
export default {
  data () {
    return {
      breadcrumbs:[]
    }
  },
  watch: {
    $route(route) {
      this.setBreadcrumbs(route);
    }
  }, 
  methods: {
    setBreadcrumbs(route) {
      this.breadcrumbs = [];
      const path = route.path;
      const items = this.items;
      for (var i in items) {
        if (items[i].items) {
          const sub = items[i].items;
          for (var j in sub) {
            if (path === sub[j].to) {
              this.breadcrumbs.push({ text: items[i].title, disabled: false });
              this.breadcrumbs.push({ text: sub[j].title, disabled: false });
            }
          }
        } else {
          if (path === items[i].to) {
            this.breadcrumbs.push({ text: items[i].title, disabled: false });
          }
        }
      }
    },
}
</script>

 

메뉴를 클릭할 때마다 watch를 통해 넘겨받은 route 정보의 path와 등록된 메뉴들 중에 url이 일치하는 메뉴의 이름을 breadcrumbs에 넣어서 화면에 보여주게 해 봤다.