vue 设置并获取当前路由的title

vue 在router设置页面展示当前路由title，刷新页面title也不会失效

1.在router.js路由里添加title

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '/',
      component: () => import('@/view/index'),
      meta: {
         title: '主页',
      }
    },
    {
      path: '/rule',
      name: '/rule',
      component: () => import('@/view/rule'),
      meta: {
         title: '规则',
      }
    }
  ]
})

2.在main.js页面设置路由的钩子函数判断获取当前页面路由的title

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

//这一段一定要写在钩子后面，否则不会生效
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})