首页 > 其他分享 >vue-router的next()方法

vue-router的next()方法

时间:2023-06-06 23:44:34浏览次数:30  
标签:vue URL next 跳转 router 导航 路由

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()之后,才会进行跳转。

标签:vue,URL,next,跳转,router,导航,路由
From: https://www.cnblogs.com/echohye/p/17462088.html

相关文章

  • 基于JAVA的springboot+vue人事管理系统、员工工资管理系统,附源码+数据库+论文+PPT
    1、项目介绍考虑到实际生活中在人事管理方面的需要以及对该系统认真的分析,将系统权限按管理员和员工这两类涉及用户划分。(a)管理员;管理员使用本系统涉到的功能主要有:首页,个人中心,员工管理,部门管理,员工考勤管理,请假申请管理,加班申请管理,员工工资管理,招聘计划管理,员工培训管理,部......
  • haproxy.router.openshift.io/disable_cookies
    haproxy.router.openshift.io/disable_cookies是OpenShift中Route对象的一个注解,用于控制是否禁用HAProxy负载均衡器在请求和响应中添加Cookie。当该注解设置为true时,HAProxy负载均衡器将不会在请求和响应中添加Cookie。这对于一些特定的应用程序场景可能非常有用,例......
  • Vue 生命周期
    Vue生命周期1.1简单实现打开页面1.1.1元素透明度变化<body><divid="root"><h2:style="{opacity}">欢迎来到王者荣耀</h2></div></body><script>varvm=newVue({el:"#root",......
  • Vue——计算属性、监听属性、Vue生命周期、组件介绍和使用、组件间通信、ref属性
    计算属性//1计算属性是基于他们的依赖变量进行缓存的//2计算属性只有在它的相关依赖变量发生改变时才会重新求值,否则不会变(函数只要页面变化,就会重新运算)//3计算属性就像python中的property装饰器,可以把方法/函数伪装成属性//4计算属性,必须有返回值<body><divid......
  • vue之生命周期钩子
    目录一、生命周期图1.官方原图2.理解的图二、生命周期8个声明周期钩子,什么情况会用到组件销毁-给组件写一个定时器一、生命周期图1.官方原图2.理解的图二、生命周期newVue()---->创建出来---》页面关闭---》被销毁掉----》整个整个过程经历了一个周期----》vue帮咱们提......
  • vue之
    目录一、计算属性案例重写过滤二、监听(侦听)属性一、计算属性1计算属性是基于它们的依赖变量进行缓存的2计算属性只有在它的相关依赖变量发生改变时才会重新求值,否则不会变(函数只要页面变化,就会重新运算)3计算属性就像Python中的property,可以把方法/函数伪装成属性4计算......
  • uniapp主题切换功能的第一种实现方式(scss变量+vuex)
    随着用户端体验的不断提升,很多应用在上线的时候都要求做不同的主题,最基本的就是白天与夜间主题。就像b站app主题切换,像这样的uniapp因为能轻松实现多端发布而得到很多开发者的青睐,但每个端的实现也有可能不同,现我把已实现的功能一点点的大家分享给大家,须要的可以参考一下,可......
  • win11 安装 Vue
    Win安装VueVue官网文档vue官网下载node.jshttps://nodejs.org/en#安装v8.9以上的版本推荐v10及以上#我下载的版本9.5.1版本链接:https://pan.baidu.com/s/19ekl3NRo4vtfv1Dp5K9kog提取码:1zoi一直点击下一步进行安装。安装到你要的目录即可。 查看npm版本......
  • VUE+elementUI前端导出解决方案,截断,清晰度,页边距,页眉页脚,富文本都处理了
    pdfLoader.js--------------------------/**@Description:html转pdf新版解决方案*@Author:jeseven/wwl*@Date:2023-05-2310:03:57*@LastEditTime:2023-05-2310:23:22*@LastEditors:jeseven/wwl*/importjsPDFfrom"jspdf";importhtml2canvasfrom&......
  • Vue2知识点简要
    一、双向绑定原理Vue2采用的是观察者-发布订阅模式,利用Object.defineProperty实现对数据已定义属性的监控(定义观察者模式),编译DOM时解析v-model等属性以及对input框等注册事件实现UI和JS的交互(也就是注册发布订阅这模式);详细的是主要是定义一个Observe类实现对象......