vue-router的next()方法

1.next():进入管道中的下一个钩子。如果全部钩子已经执行完毕,则导航的状态就是confirmed(确认的)

2.next(false):中断当前的导航。如果URL改变了(可能是用户手动输入或者浏览器后退),那么URL地址会重置到from路由对应的地址

3.next('/')或者next({path: '/'}):跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。可以向next传递任意对象,允许设置诸如{replace:true,name:'home'}之类的选项以及任何用在router-link的toProp或router.push中的选项。

4.next(error)如果传入的是next的参数是个error实例,则导航会被终止且该错误会被传递给router.onError()注册过的回调

//全局前置路由
router.beforeEach((to, from, next) => {
  if(to.path=='/style'){
    next(false)
    return
  }
  NProgress.start();
  next();
});
router.afterEach(() => {
  NProgress.done();
});

如上述代码块,注册一个全局路由守卫。

当需要从'from'跳转至'to'时,路由守卫会监控到这一举动,若不执行next(),则相当于没有放行,会依然留在from对应的路由。只有当执行了next()之后,才会进行跳转。

posted @   槑孒  阅读(3005)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
点击右上角即可分享
微信分享提示