vue 페이지에 타이틀 변경

페이지 타이틀 변경

리액트의 경우 react-helmet이라는 모듈을 통해서 spa 페이지의 타이틀을 변경할 수 있다.
Vue의 경우엔 어떻게 변경할 수 있을까?
바로 딱히 모듈을 다운로드할 필요도 없이 바로 dom에 접근해서 바꿀 수 있다.

const router = new VueRouter({
  routes: [
    {
      path: "/",
      component: MainComponent,
      meta: {
        title: "Main",
      },
    },
    {
      path: "/login",
      component: LoginComponent,
      meta: {
        title: "Login",
      },
    },
  ],
});

위와 같이 meta 속성에 타이틀을 적어준다.

router.afterEach((to, from) => {
  //nextTick은 Dom이 업데이트 된 후 실행됩니다.
  Vue.nextTick(() => {
    document.title = to.meta.title;
  });
});

그리고 afterEach에서 dom에 접근해 바꿔주면 된다.
좀 더 깔끔하게 변경한다면 어떻게 할 수 있을까?

const makeTitle = (title) =>
  title ? `${title} | Runningwater` : "Runningwater";

router.afterEach((to, from) => {
  Vue.nextTick(() => {
    document.title = makeTitle(to.meta.title);
  });
});

위와 같이 바꾼다면 만약 meta 속성에 title을 따로 지정하지 않았을 경우 “Runningwater”가 나올 것이고, 타이틀을 지정했다면 “타이틀

Runningwater” 형태로 나오게 될 것이다.