vue-router钩子

导航钩子

vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的。http://www.jianshu.com/p/f375d84c1d4b

全局钩子
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
    // do something 
    next();
});

router.afterEach((to, from, next) => {
    console.log(to.path);
});

每个钩子方法接收三个参数:
to: Route : 即将要进入的目标 [路由对象]
from: Route : 当前导航正要离开的路由
next: Function : 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next

next: Function : 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next
方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from
路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

确保要调用 next方法,否则钩子就不会被 resolved。

组件内的钩子
let fromPath = '';
export default{
    beforeRouteEnter (to, from, next) {
         // 在渲染该组件的对应路由被 confirm 前调用
         // 不!能!获取组件实例 `this`
         // 因为当钩子执行前,组件实例还没被创建
         fromPath = from.path;
         next();
    },
}

### Vue Router 钩子函数概述 Vue RouterVue.js 的官方路由管理器,用于构建单页面应用(SPA),其中钩子函数(也称为导航守卫)是非常重要的功能之一。它们允许开发者在导航过程中执行自定义逻辑,比如权限校验、数据预取等。 以下是 Vue Router 中常见的几种类型的钩子函数以及其使用方法: --- #### 1. **全局前置守卫 (`beforeEach`)** 该钩子会在每次路由跳转之前触发,适用于整个应用程序范围的拦截操作,例如登录状态验证。 ```javascript router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated()) { next('/login'); // 如果未认证,则重定向到登录页 } else { next(); // 否则继续导航 } }); ``` 此代码片段展示了如何通过 `meta` 字段判断目标路由是否需要身份验证[^1]。 --- #### 2. **全局解析守卫 (`beforeResolve`)** 类似于 `beforeEach`,但它是在导航被确认之后,但在组件渲染之前调用。适合处理依赖于异步数据获取的情况。 ```javascript router.beforeResolve((to, from, next) => { const asyncDataLoaded = loadAsyncData(to.params.id); if (!asyncDataLoaded) { next(false); // 停止导航直到数据加载完成 } else { next(); } }); ``` 上述例子说明了当某些条件不满足时暂停导航的过程[^5]。 --- #### 3. **全局后置钩子 (`afterEach`)** 这个钩子不会接收 `next` 函数也不会改变导航本身,主要用于记录日志或者更改页面标题之类的副作用操作。 ```javascript router.afterEach((to, from) => { document.title = to.meta.title || 'Default Title'; }); ``` 这里演示了一个简单的设置网页标题的例子[^2]。 --- #### 4. **路由独享守卫 (`beforeEnter`)** 针对某个具体的路由配置单独使用的守卫,通常用来简化复杂的业务逻辑分配。 ```javascript const routes = [ { path: '/admin', component: Admin, beforeEnter: (to, from, next) => { isAdmin() ? next() : next('/'); }, }, ]; ``` 上面这段脚本检查用户是否有管理员权限再决定是否进入指定路径[^3]。 --- #### 5. **组件内的守卫** ##### a. `beforeRouteEnter` 特殊之处在于无法直接访问当前组件实例(`this`),但是可以通过传递回调给 `next` 来间接获得。 ```javascript export default { beforeRouteEnter(to, from, next) { next(vm => { console.log('Component instance:', vm); }); }, }; ``` 注意这里的 `vm` 参数代表的就是即将挂载好的组件实例对象[^4]。 ##### b. `beforeRouteUpdate` 仅限于同一个组件重新渲染期间有效,即 params 或 query 发生变化但保持同一组件不变的情况下适用。 ```javascript export default { data() { return { msg: '' }; }, beforeRouteUpdate(to, from, next) { this.msg = to.params.message; next(); }, }; ``` 此处更新消息变量以反映新的路由参数值。 ##### c. `beforeRouteLeave` 离开当前视图前运行,可用于提示保存工作进度或其他清理动作。 ```javascript export default { beforeRouteLeave(to, from, next) { const answer = window.confirm('Do you really want to leave?'); if (answer) { next(); } else { next(false); } }, }; ``` 以上示例询问用户是否真的要退出当前界面。 --- ### 总结 Vue Router 提供多种方式让开发者能够精确控制用户的浏览行为,无论是整体性的还是局部特化的场景都能找到合适的解决方案。合理运用这些钩子不仅可以增强用户体验还能提高程序的安全性和稳定性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值