vue-router 的导航钩子
在 Vue.js 中，Vue-router 已经成为了常用的路由工具。通过 Vue-router 可以轻松地实现单页应用（SPA）中的页面跳转和组件加载。然而，在应用中，我们可能需要在路由跳转前或跳转后进行一些操作，例如权限验证、数据预加载等。这时就可以使用 Vue-router 提供的导航钩子（Navigation Guards）。
前置守卫
前置守卫是在路由跳转前被调用的函数。Vue-router 提供了以下三种前置守卫：
beforeEach
全局前置守卫，在每个路由跳转前都会被调用，可以用来进行登录状态验证等操作。该守卫接收三个参数：to、from 和 next。其中 to 表示即将跳转的目标路由对象，from 表示当前路由对象，next 是一个函数，用于指示路由是否可以继续跳转。
javascript复制代码
router.beforeEach((to, from, next) => { if (to.meta.auth && !store.state.isLogin) { // 需要登录才能访问该路由 next({ path: '/login', query: { redirect: to.fullPath } // 将目标路由地址作为参数传递给登录页面 }) } else { next() // 跳转到目标路由 } })
beforeResolve
全局解析守卫，在所有路由组件内守卫和异步路由组件被解析之后调用，可以用来进行路由数据预加载等操作。该守卫接收三个参数：to、from 和 next。
javascript复制代码
router.beforeResolve((to, from, next) => { // 预加载组件数据 axios.get(to.meta.url).then(res => { to.meta.data = res.data next() }) })
afterEach
全局后置钩子，在每个路由跳转后被调用，可以用来进行页面滚动或用户行为统计等操作。该守卫只有一个参数：to。
javascript复制代码
router.afterEach((to) => { // 页面滚动到顶部 window.scrollTo(0, 0) // 统计用户跳转行为 statistics(to.path) })
路由独享守卫
路由独享守卫是仅在某个路由配置中定义的前置守卫。使用这种方式可以仅对某个路由进行特殊处理。路由独享守卫通过在路由配置中添加 beforeEnter 属性来实现。
javascript复制代码
const routes = [ { path: '/admin', component: Admin, beforeEnter: (to, from, next) => { if (!store.state.isAdmin) { // 需要管理员权限才能访问 next({ path: '/login', query: { redirect: to.fullPath } // 将目标路由地址作为参数传递给登录页面 }) } else { next() // 跳转到目标路由 } } } ]
组件内的守卫
组件内部的守卫可以在组件实例中添加 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 属性实现。这些属性分别对应了路由组件被激活前、路由更新时和路由离开时的操作。
javascript复制代码
export default { beforeRouteEnter (to, from, next) { // 组件被激活前的操作，例如数据加载等 getDetail(to.params.id).then(detail => { next(vm => vm.detail = detail) }) }, beforeRouteUpdate (to, from, next) { // 路由更新时的操作，例如数据更新等 updateDetail(to.params.id).then(detail => { this.detail = detail next() }) }, beforeRouteLeave (to, from, next) { // 路由离开时的操作，例如确认框等 if (this.isDirty) { if (confirm('你还有未保存的数据，确定要离开吗？')) { next() } else { next(false) } } else { next() } } }
完整示例
下面是一个完整的使用前置守卫、路由独享守卫和组件内守卫的示例：
javascript复制代码
const routes = [ { path: '/', component: Home, meta: { auth: true } }, { path: '/login', component: Login }, { path: '/admin', component: Admin, beforeEnter: (to, from, next) => { if (!store.state.isAdmin) { // 需要管理员权限才能访问 next({ path: '/login', query: { redirect: to.fullPath } // 将目标路由地址作为参数传递给登录页面 }) } else { next() // 跳转到目标路由 } } }, { path: '/detail/:id', component: Detail, beforeRouteEnter (to, from, next) { // 组件被激活前的操作，例如数据加载等 getDetail(to.params.id).then(detail => { next(vm => vm.detail = detail) }) }, beforeRouteUpdate (to, from, next) { // 路由更新时的操作，例如数据更新等 updateDetail(to.params.id).then(detail => { this.detail = detail next() }) }, beforeRouteLeave (to, from, next) { // 路由离开时的操作，例如确认框等 if (this.isDirty) { if (confirm('你还有未保存的数据，确定要离开吗？')) { next() } else { next(false) } } else { next() } } } ] const router = new VueRouter({ routes }) router.beforeEach((to, from, next) => { if (to.meta.auth && !store.state.isLogin) { // 需要登录才能访问该路由 next({ path: '/login', query: { redirect: to.fullPath } // 将目标路由地址作为参数传递给登录页面 }) } else { next() // 跳转到目标路由 } }) export default router
通过使用前置守卫、路由独享守卫和组件内守卫，我们可以实现更加灵活的路由控制和数据预加载操作。在实际应用中，需要根据具体情况选择合适的导航钩子来完成对应的操作。
总结
通过使用 Vue-router 的导航钩子，我们可以在路由跳转前或跳转后进行一些操作，例如权限验证、数据预加载等。Vue-router 提供了全局前置守卫、全局解析守卫和全局后置钩子，以及路由独享守卫和组件内守卫，可以根据具体情况选择合适的导航钩子来完成对应的操作。
需要注意的是，在使用导航钩子时要避免出现无限循环的情况，否则会导致浏览器崩溃。同时，导航钩子也不能完全替代服务端渲染和骨架屏等优化方式，需要在实际项目中综合考虑并选择最优方案。