[SEO] vue3 + title

문제점

페이지 이동시 페이지 타이틀이 index.html에 들어간 내용으로 고정되어있음

 

개선 방법

router 활용

meta 필드 추가

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about/1',
      name: 'about1',
      meta: { title: "about1" },
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/about/2',
      name: 'about2',
      meta:{title:"about2"},
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/about/3',
      name: 'about3',
      meta:{title:"about3"},
      component: () => import('../views/AboutView.vue')
    },
  ]
})

 

navigation guard

const DEFAULT_TITLE = 'Default Title';
router.afterEach(to => {
  const title = to.meta.title ? to.meta.title : DEFAULT_TITLE;
  nextTick(()=> document.title = title)
})

 

---

결과

타이틀 없을 때

타이틀 있을 때



 

 

참고

https://stackoverflow.com/questions/51639850/how-to-change-page-titles-when-using-vue-router