132_组件内路由守卫

示例：

router文件夹下的index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
const router = new VueRouter({
  routes: [{
      name: 'guanyu',
      path: '/about',
      component: About,
      meta: {
        isAuth: true, //判断是否需要鉴权
        title: '关于'
      }
    },
    {
      name: 'zhuye',
      path: '/home',
      component: Home,
      meta: {
        title: '主页'
      },
      children: [{
          name: 'xinwen',
          path: 'news',
          component: News,
          meta: {
            title: '新闻'
          }
        },
        {
          name: 'xiaoxi',
          path: 'message',
          component: Message,
          meta: {
            title: '消息'
          },
          children: [{
            name: 'xiangqing',
            path: 'detail',
            component: Detail,
            meta: {
              title: '详情'
            },

            props($route) {
              return {
                id: $route.query.id,
                title: $route.query.title
              }
            }
          }]
        }
      ]
    }
  ]
})

//组件内路由守卫 配合 全局后置路由守卫 一样可以更新标题
router.afterEach((to, from) => {
  console.log('后置路由守卫', to, from)
  document.title = to.meta.title || '硅谷系统'
})

export default router

pages文件夹下的About.vue

<template>
  <h2>我是About的内容</h2>
</template>

<script>
  export default {
    name: 'About',

    //进入守卫：通过路由规则，进入该组件时被调用
    beforeRouteEnter(to, from, next) {
      console.log('About--beforeRouteEnter', to, from)
      if (to.meta.isAuth) //判断是否需要鉴权
        if (localStorage.getItem('school') === 'atguigu')
          next()
        else alert('学校名不对，无权限查看！')
      else next()
    },

    //离开守卫：通过路由规则，离开该组件时被调用
    beforeRouteLeave(to, from, next) {
      console.log('About--beforeRouteLeave', to, from)
      next()
    }
  }
</script>

自我总结

全局前置与全局后置路由守卫是：初始化时、每次路由切换时，不管前还是后都会被调用。
组件内路由守卫没有前后之分，只有通过路由规则进入组件前调用，离开组件时（切换到别的路由时）调用。