vue路由守卫——改页面title

index.vue

<button @click="goLogin">跳登录页</button>

goLogin: function () {
  this.$router.push('/Login') // 路由跳转
}

login.vue

<button @click="goHome">跳首页</button>
goHome: function () {
  this.$router.push('/') // 路由跳转
}

app.vue

<router-view></router-view>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/pages/index'
import Login from '@/pages/login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index,
      meta: {
        title: '首页'
      }
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login,
      meta: {
        title: '登录页'
      }
    }
  ]
})

main.js

import router from './router'

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

router.beforeEach((to, from, next) => { // 路由守卫
  document.title = to.matched[0].meta.title // 改标签
  next() // 必写
})