[ Vue.js ] 페이지 탭의 이름 설정하기, How to config the Name of page Tab. Router.

Vue.js 에서 router 를 이용할 때 페이지 탭의 이름을 설정할 수 있다.

바로 router 의 index.js 에서 가능하다.

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: 'IP Address Tracker'
    }
  },
]

Home.vue의 meta.title : '  ' 의 값을 설정

그리고 rotuer 아래에 작성

// page tab control
router.beforeEach((to, from, next) => {
  document.title = `${to.meta.title}`
  next()
})

 

전체 코드 예시

// src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: 'IP Address Tracker'
    }
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

// page tab control
router.beforeEach((to, from, next) => {
  document.title = `${to.meta.title}`
  next()
})

export default router

 

유용하게 사용하십쇼!