vue路由插件之vue-route

// to 将要进路的路由 route
// from 离开的路由 route
// next 进入下一个路由，不调用则不会进入下一个路由
console.log('全局前置守卫')
next()
})

/* 全局解析守卫 */
router.beforeResolve((to, from, next) => {
// to 将要进路的路由 route
// from 离开的路由 route
console.log('全局解析守卫')
next()
})

/* 全局后置守卫 */
router.afterEach((to, from) => {
// to 将要进路的路由 route
// from 离开的路由 route
console.log('全局后置守卫')
})
/* 组件独享守卫 */
beforeEnter(to, from, next) {
console.log('组件内独享守卫')
next()
}

　beforeRouteEnter(to, from, next) {
  console.log('组件内守卫进入')
  next()
 },
 beforeRouteUpdate(to, from, next) {
  console.log('组件内守卫更新')
  next()
 },
 beforeRouteLeave(to, from, next) {
  console.log('组件内守卫离开前')
  next()
 }

　　执行顺序，

　　　　1.前组件内守卫离开

　　　　2.全局前置守卫

　　　　3.路由独享守卫

　　　　4.组件内守卫进入

　　　　5.全局解析守卫

　　　　6.全局后置守卫

　　或者时刷新组件时（/about 跳转到/about?id=1111）

　　　　1.全局前置守卫

　　　　2.组件内守卫更新

　　　　3.全局解析守卫

　　　　4.全局后置守卫

总结

以上所述是小编给大家介绍的vue路由vue-route的实例代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧！