Vue.js（二）—— 使用vue-router設置每個頁面的title

1.引入vue-router

import Vue from 'vue'
import Router from 'vue-router'

2. 在router/index.js文件中配置每個頁面的title：

export default new Router({
  routes: [{
    path: '/',
    name: 'homepage',
    component: homepage,
    meta: {
      title: '首頁'
    }
  }, {
    path: '/voucher_list',
    name: 'vList',
    component: vList,
    meta: {
      title: '優惠券列表'
    }
  }, {
    path: '/voucher_select',
    name: 'vSelect',
    component: vSelect,
    meta: {
      title: '選擇優惠券'
    }
  }]
})

3. 在main.js文件中遍歷，使之生效

// 以下代碼需要寫在main.js裏面

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