vue-router 导航守卫

1. 全局守卫

router.beforeEach((to, from, next) => {
  console.log('before each')
  next()
})

router.beforeResolve((to, from, next) => {
  console.log('before resolve')
  next()
})

router.afterEach((to, from) => {
  console.log('after each')
})

beforeEach 用于校验

router.beforeEach((to, from, next) => {
  console.log('before each')
  if (to.fullPath === '/app') {
    next('/login')
  } else {
    next()
  }
})

2. 路由独享的守卫

beforeEnter, 在beforeEach与beforeResolve中间执行

  {
    path: '/app',
    name: 'app',
    component: Todo,
    beforeEnter (to, from, next) {
      console.log('before eanter')
      next()
    }
  },

3. 组件内的守卫

export default {
  beforeRouteEnter (to, from, next) {
    console.log('beforeRouteEnter')
    next()
  },
  beforeRouteUpdate (to, from, next) {
    console.log('beforeRouteUpdate')
    next()
  },
  beforeRouteLeave (to, from, next) {
    console.log('beforeRouteLeave')
    if (global.confirm('are you leave?')) {
      next()
    }
  }
}

• beforeRouteEnter 在beforeEnter之后，在beforeResolve之前触发
• beforeRouteUpdate 路由更新 在同一个组件，用在两个地方切换时会触发

<router-link to='/login/123?cc=999'>login123</router-link>
<router-link to='/login/456?cc=aaa'>login456</router-link>

• beforeRouteLeave 判断页面是否离开

4. 组件异步加载，而不是一次全部加载所有的组件

  {
    path: '/login/:id',
    component: () => import('../views/login/login.vue'),
    props: (route) => ({
      id: route.query.cc
    })
  }

需要安装插件babel-plugin-syntax-dynamic-import
在.babelrc中plugins配置syntax-dynamic-import