路由导航守卫

需求：当我进入某一页面前需要判断当前页面是否登录，是否具有权限。如果没有登录则进入登录页面进行登录，没有权限进入a页面，有权限进入b页面。

思路：通过动态路由路由守卫的beforeEach来实现。

在router.js中添加代码

router.beforeEach((to, from, next) => {
  console.log(to, '即将要进入的目标 路由对象')
  console.log(from, '当前导航正要离开的路由')
  console.log(next, 'Function')
  // to: Route: 即将要进入的目标 路由对象
  // from: Route: 当前导航正要离开的路由
  // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
8 　//具体实现方式待补充。。
  next()
})

vue中提供了三种钩子

1.全局导航守卫钩子函数

2.路由独享钩子函数

3.组件内钩子函数

一、全局导航守卫钩子函数

1.beforeEach：在跳转路由前执行的函数

一定要调用next方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数,如果不添加next函数，终止导航

2.afterEach：在跳转路由后执行的函数

　　此时已经跳转路由完成，无需调用next参数

二、路由独享钩子函数

1.beforeEnter

{
    path: '/',
    name: 'carrie',
    component: resolve => require(['./../view/carrie.vue'], resolve),
    beforeEnter: (to, from, next)=> {
  　　console.log(to, 'beforeEnter即将要进入的目标 路由对象')
  　　console.log(from, 'beforeEnter当前导航正要离开的路由')
  　　console.log(next, 'beforeEnter Function')
      next()
 }

三、组件内钩子函数

1.beforeEnter

2.beforeUpdate

3.beforeLeave

  created() {},
  beforeRouteEnter(to, from, next) {
    console.log(to, 'beforeRouteEnter to')
    console.log(from, 'beforeRouteEnter from')
    console.log(next, 'beforeRouteEnter next')
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log(to, 'beforeRouteUpdate to')
    console.log(from, 'beforeRouteUpdate from')
    console.log(next, 'beforeRouteUpdate next')
    next()
  },  
  beforeRouteLeave(to, from, next) {
    console.log(to, 'beforeRouteLeave to')
    console.log(from, 'beforeRouteLeave from')
    console.log(next, 'beforeRouteLeave next')
    next()
  },
  methods:{}

beforeRouteEnter访问不了this,beforeRouteUpdate和beforeRouteLeave可以访问this

next()//跳转to.name路径
next(false) //终止导航
next(/XX) //跳转指定路径