Vue Router 怎麼去設每頁的Title

最近要研究如何用Vue & Vue Router作SPA(Single Page App)，但是寫到一半發現怎麼Title都是一樣的，這樣頁面的說明性可能不夠，且在Google搜尋結果的頁面說明也不好懂，於是再看一下文件，終於發現了Vue Router的導航守衛要怎麼設定，以下就是範例：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Faq from '@/components/Faq'

Vue.use(Router)


const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {title: 'Home'}
    },
    {
      path: '/faq',
      name: 'Faq',
      component: Faq,
      meta: {title: 'FAQ'}
    }
  ]
})

router.beforeEach((to, from, next) => {
  window.document.title = to.meta.title;
  next()
})
export default router

import Vue from 'vue'

import Router from 'vue-router'

import Home from '@/components/Home'

import Faq from '@/components/Faq'

Vue.use(Router)

const router = new Router({

mode: 'history',

routes: [

{

path: '/',

name: 'Home',

component: Home,

meta: {title: 'Home'}

{

path: '/faq',

name: 'Faq',

component: Faq,

meta: {title: 'FAQ'}

}

]

})

router.beforeEach((to, from, next) => {

window.document.title = to.meta.title;

next()

})

export default router

記錄一下，免得還要重新找～

Vue Router 怎麼去設每頁的Title

參考資料：

發佈留言取消回覆

分類

近期留言

Vue Router 怎麼去設每頁的Title

參考資料：

發佈留言 取消回覆

分類

標籤

近期留言

發佈留言取消回覆