vue 設置每個頁面的title

由於vue文件中只有一個Index.html 文件

title 顯示需要通過vue-router來設置

1. router---index.js文件中添加meta屬性

export default new Router({
    // mode: 'history',
  routes: [
      {
      path: '/',
      name: 'Home',
      component: function(resolve){ require(['../components/model/index_home.vue'],resolve)},
      meta: {
        title: '錦穗'
      }
    },{
        //腕表
      path:'/watchPage',
      name:'watchPage',
      component:function(resolve){ require(['../components/model/watchPage/watchPage.vue'],resolve)},
      meta: {
        title: '腕表'
      }
    },{
      path:'/sosPage',
      name:'sosPage',
      component:function(resolve){ require(['../components/model/watchPage/sosPage.vue'],resolve)},
      meta: {
        title: 'sos'
      }
    }]
})

2.在main.js  在每一個meta里面設置頁面的title名字，最后在遍歷

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

1.Vue.beforeEach(function(to,form,next){}) /*在跳轉之前執行*/

2.Vue.afterEach(function(to,form))/*在跳轉之后判斷*/

在路由跳轉的時候，我們需要一些權限判斷或者其他操作。這個時候就需要使用路由的鈎子函數。

定義：路由鈎子主要是給使用者在路由發生變化時進行一些特殊的處理而定義的函數。

beforeEach函數有三個參數：

• to:router即將進入的路由對象
• from:當前導航即將離開的路由
• next:Function,進行管道中的一個鈎子，如果執行完了，則導航的狀態就是 confirmed （確認的）；否則為false，終止導航。

afterEach函數不用傳next()函數