路由导航守卫

简介：vue-router（导航守卫）就是路由跳转前、中、后过程中的一些钩子函数，我们可以利用这些函数做一些其他的事情。通常可以利用路由拦截来判断用户是否登录，是否有权限浏览。

路由守卫可以分为 全局前置守卫、全局后置守卫、独享路由守卫、组件内路由首位

        router.beforeEach(function (to, from, next){

                to:          到哪里去  对象类型  将要访问的路由对象

                from：   从哪里来  对象类型  离开的路由对象

                next：    放行         函数类型

        }

一、全局前置守卫

        在项目中每次发生路由的导航跳转时都会触发全局前置守卫，必须先经过全局前置守卫才可以完成组建的跳转。

使用方法：router.beforeEach(fn)

//定义全局前置守卫
router.beforeEach(function(to,from,next){
	//to   是预期要访问的路由对象		到哪里去
    //from 是将要离开的路由对象		 从那里来
    //next 是一个函数  表示放行  有三种用法
    	next() 表示放行
        next('/login') 表示强制跳转指定路径
        next(false) 表示不允许访问  停留在当前页面
})

二、全局后置守卫

        概念：路由跳转之后执行，和前置不同的是：不接受 next() 函数，不会改变导航本身

使用方法：router.afterEach(fn)

在index.js文件中定义
//定义全局后置路由守卫
router.afterEach(function(to ,from ){
	console.log('后置守卫执行了')
	document.title = to.meta.title
})

三、独享路由守卫

        概念：作用跟全局路由守卫一样，但是执行顺序是先全局再独享。

在index.js文件中指定的路由上配置
#可以路由配置上直接定义 beforeEnter 守卫：
{
    path:'/about',
    name:'about',
    //配置独享路由守卫
                beforeEnter(to, from, next) {
                    /* console.log('stu的独享路由守卫被执行了')
                    next() */
                    if(to.meta.st){
                        next()
                    }else{
                        alert('无权访问')
                        next(false)
                    }
                }
}

四、组件内守卫

        单独给某一个组件设置路由守卫，可以定义一些业务逻辑

#可以在路由组件内直接定义以下路由导航守卫：
# beforeRouteEnter beforeRouteUpdate beforeRouteLeave
# About.vue 
beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }