라우터를 이용해 화면 title 설정하기

화면마다 화면 이름을 하드코딩으로 직접 쓰지 않고, route 디렉토리에 정해진 대로 return해 사용 해 보자.

router 디렉토리에 index.js 파일을 하자 만들고 그 안에 이렇게 작성 해 준다.

router.afterEach((to, from, next) => {
  document.title = i18n.t(to.meta.title)
})

afterEach를 통해 라우터에 접근하기 전 title을 얻어올 수 있다. i18n 라이브러리는 없어도 된다.

이렇게 정의하면 라우터들이 모여있는 route.js 파일에 선언한 컴포넌트의 title을 각 컴포넌트에서 꺼내 사용할 수 있게 되는데

  {
    path: '/',
    name: 'home-main',
    components: loadViewHeaderFooterSide('home-main'),
    meta: {
      title: '메인화면'
    }
  },

가령 이렇게 정의했다면 main화면 컴포넌트에서 $route.meta.tltle 을 작성 해 주면 해당 컴포넌트의 라우터에 지정된 title을 꺼내올 수 있게 된다.