vue實現動態改變title

vue實現動態改變title

想要實現vue動態改變頁面title，須要給每一個頁面設置標題。而且在路由發生變化時修改頁面title

router - index.js

const router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/index',
            name: 'index',
            component: Index,
            meta:{
                // 頁面標題title
                title: '首頁'
            }
        },
        {
            path: '/content',
            name: 'content',
            component: Content,
            meta:{
                title: '內容'
            }
        }
    ]
})
export default router

main.js

import router from './router'
router.beforeEach((to, from, next) => {
  /* 路由發生變化修改頁面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})