Vue路由守卫

Vue路由守卫

路由守卫常用在登录页面跳转前的验证，判断是否登陆，登录显示个人中心页面，没登录则显示登录页面，这在网页上也是很常见的操作。

总的来说，是当路由跳转前或跳转后、进入、离开某一个路由前、后，需要做某些操作，就可以使用路由钩子来监听路由的变化。

路由守卫有三种使用的方式：全局路由守卫、局部路由守卫（单个路由守卫和组件内路由守卫）。
1.全局路由守卫
全局路由守卫有两个钩子函数：beforeEach前置路由守卫和afterEach后置路由守卫。

若用Vue-cli脚手架，在路由的配置文件里配置全局路由守卫。

守卫方法接收三个参数：
to：即将要进入的目标路由对象
from：当前导航正要离开的路由
next：执行下一步（全局的afterEach不需要next）

//全局的前置路由守卫
router.beforeEach((to, from, next) => {
    //会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了
    if(to.path === "/cinema"){
 	 console.log("进入cinema就执行")
  }
  if(from.path === "/cinema"){
 	 console.log("从cinema跳出来后执行")
  }
  next()   //必须要执行
})

//全局的后置路由守卫（少用）
router.afterEach((to, from) => {
    //会在任意路由跳转后执行
  console.log('参数不需要next，已经进入了就不需要放行了')
})

2-1.局部路由守卫（单个路由守卫）
若用Vue-cli脚手架，在路由的配置文件里配置，设置在被守卫的路由路径里，beforeEnter进入到路由之前。

 routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        console.log("进入到foo哦...")
      }
    }
  ]

2-2.局部路由守卫（组件内路由守卫）
beforeRouteEnter还没进到组件之前，啥也没有beforeRouteUpdate用于跳转到带有动态参数的路径切换时
beforeRouteLeave可以从当前组件离开并且拿到this

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