Vue.js에서 주소(라우팅) 변경 감지하여 제목 변경하기

 

 

 

Vue.js에서 라우팅 감지하기

 

 

 

---

<버전 정보>

• vue version : 2.6.14

 

---

 

<사용 계기>

• Vue.js을 사용하여 포트폴리오용 웹 앱을 개발 중이었던 어느날이었다. 기존에는 웹 앱의 제목이 navigation에 따라 바뀌도록 하기 위하여 navigation 클릭시 해당 제목이 바뀌도록 구현하였다. 하지만 특정 페이지에서 새로고침(F5) 혹은 .vue 파일의 내용이 바뀔 때 제목이 처음 페이지 제목으로 돌아가는 것을 확인하였다. 
• 제목의 변경이 navigation을 클릭에만 의존하고 있어 자신이 특정 페이지에 있다는 것을 알기 위해서는 라우팅으로 주소창 뒤에 붙는 '/서브주소' 을 이용해야겠다는 생각을 하였다. 서브주소는 새로고침을 하여도 바뀌지 않기 때문에 구현이 가능하면 기존에 사용하던 기능을 사용하지 않아도 될 것 같았다.
• 그래서 라우팅을 감지하는 코드를 찾아 웹 앱에 적용하게 되었다.

 

---

 

<적용 과정>

• 기존에 사용 중이던 navigation 메뉴를 클릭하는 이벤트는 vuex를 통하여 구현되어있었고, 이 이벤트를 navigation 코드가 포함된 .vue파일(컴포넌트)에 import하여 사용하고 있었다. 하지만 새로 적용할 코드는 특정 컴포넌트가 아닌 공용의 기능이라고 생각되어 최상위 컴포넌트인 App.vue에 추가를 하게 되었다. 그리고 vuex의 state에 저장중이던 제목과 제목을 변경하기 위해 사용되었던 기존 mutations내의 함수를 재사용 및 수정하여 사용하였다.
• 적용을 하고나니 메뉴를 클릭할 때에는 라우터가 작동하여 제목이 잘 변경되었지만, 새로고침에서는 라우터가 동작하지 않아 감지하지 못하는 것을 발견하였다. 그래서 javascript 명령어로 현재 pathname을 불러와 새로고침시에만 작동하도록 코드를 추가하였다.

 

---

 

<실제 코드>

// App.vue
  created () {
    // 페이지 시작시 현재 페이지에 맞게 타이틀 변경
    this.changeTitle(window.location.pathname)
  },
  watch: { // 현재 페이지를 감지하여 타이틀 변경
    '$route' (to, from) {
      this.changeTitle(to.path) // '/서브주소'
    }
  }

• created는 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋은 단계로, 가장 먼저 제목의 데이터가 변경될 수 있게끔 하기 위하여 사용되었다. 그리고 window.location.pathname 명령어로 '/서브주소'를 가져와 제목을 변경한다.
• watch 속성은 처음 써보았는데 데이터 변화를 감지하여 자동으로 특정 로직을 수행하며 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합하다고 한다.
• 여기에서는 watch 속성이 라우터를 감시하다가 값이 변경되면 지정한 로직(changeTitle)을 수행한다.
• to.path를 넘긴 이유는 아래와 같이 vuex의 state에 path(to, /서브주소)가 저장되어 있어 path를 사용하여 제목(title)을 가져오기 위함이었다.

// src/store/index.js
export default new Vuex.Store({
  state: {
    site: {
      title: 'Home',
      menu: [
        {
          title: 'Home',
          icon: 'mdi-home',
          to: '/'
        },
        {
          title: 'About',
          icon: 'mdi-information',
          to: '/about'
        }
      ]
    }
  }
})

 

• 그리고 실질적으로 path값을 받아와 처리할 vuex의 mutations 내의 함수(changeTitle)는 아래와 같다.

// src/store/index.js
  mutations: {
    changeTitle: (state, payload) => { // 타이틀 변경시 작동
      for (let i = 0; i < state.site.menu.length; i++) {
        if (state.site.menu[i].to === payload) {
          state.site.title = state.site.menu[i].title
          break
        }
      }
    }
  }

• 위 코드는 path를 받아와 state에 있는 menu의 모든 path(to)를 검색하여 일치하는 path를 찾게되면 state의 title에 저장하는 로직이다.

 

---

 

<정리>

• 기존의 사용 방식이었던 'navigation 클릭시 제목 변경 기능'을 라우터 감시를 사용하여 '라우터 변경시 제목 변경 기능'으로 수정하였고, 또한 현재 url을 가져와서 새로고침이나 페이지 첫 진입시 제목을 변경되는 기능을 추가하였다.
• 이것으로 특정 페이지로 이동이나 새로고침 등에도 제목이 적절히 바뀔 수 있도록 구현되었다.
• 적절하게 적용된 코드인지는 아직 경험이 부족하여 장담할 수는 없지만 오늘 내가 사용할 수 있는 최적의 코드임에는 틀림이 없었다.
• 좀 더 경험이 쌓이고 많은 기능 구현 방법을 알게되면 그 때 다시 돌아보며 판단하고 싶다.
• 그리고 작성중에 생각해보니 주소창에 특정 페이지(있는 페이지)가 아닌 다른 임의의 페이지(없는 페이지)로 들어올 경우 아직 예외처리가 되지 않음을 또 확인할 수 있었고 추후 업데이트를 통하여 보완하고 싶다.

 

---

 

<참고 페이지>

• 라우팅 감지 참고 : https://han-um.tistory.com/15

Vue.js에서 주소(라우팅) 변경 감지하기

 

• watch 속성 참고 : https://impnem.tistory.com/37

5장. 화면을 개발하기 위한 기본 지식과 팁 - 템플릿 & 프로젝트 구성 - 1

 

• 뷰 라우터 공식 사이트 : https://router.vuejs.org/introduction.html

Introduction | Vue Router