Vue:router的beforeEach是什么「建议收藏」

Vue:router的beforeEach是什么「建议收藏」来自:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#全局守卫正如其名,vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的,单个路由独享的,或者组件级的。记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这…

大家好,又见面了,我是你们的朋友全栈君。

来自:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#全局守卫
正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。

记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫。

全局守卫

你可以使用 router.beforeEach 注册一个全局前置守卫:

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数:

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

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

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

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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/149989.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • navecat 15激活码-激活码分享

    (navecat 15激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • dpkg配置包出错_dpkg-reconfigure

    dpkg配置包出错_dpkg-reconfigure2021-10-18by崔斐然dpkg:处理软件包xxx(–configure)时出错解决方法来源:https://blog.csdn.net/jf_xu/article/details/82285008dpkg:处理软件包libicu-dev(–configure)时出错:依赖关系问题-仍未被配置dpkg:依赖关系问题使得libxml2-dev:amd64的配置工作不能继续:libxml2-d…

  • JavaScript:三目运算符

    JavaScript:三目运算符HELLO大家好!三目运算符是一个非常简单且使用的运算符。是由两个运算符连接的三个操作数据或者表达式条件表达式?表达式1:表达式0当条件表达式为true则选择表达式1,反之false则选择表达式0举个栗子varage=15;console.log(age<18?’未成年’:’成年’);结果为:···本人写博客就是想记录一下自己所学的知识(目前正在学习中),巩固知识加深记忆,也顺便分享一下自己的所学,有什么地方写的不对,希望大家可以多多指出,让我及时改正。如果我分享的

  • Django 教程_最简单剪花朵的步骤

    Django 教程_最简单剪花朵的步骤一、Django简介1.web框架介绍具体介绍Django之前,必须先介绍WEB框架等概念。web框架:别人已经设定好的一个web网站模板,你学习它的规则,然后“填空”或“修改”成你自己…

  • 程序员的财务自由之路(一)- 扬帆起航

    程序员的财务自由之路(一)- 扬帆起航程序员的财务自由之路

  • IDEA和MySQL数据库建立连接

    IDEA和MySQL数据库建立连接IDEA和MySQL数据库建立连接操作步骤如下:1.打开IDEA软件,点击顶部导航栏的View–>ToolWindows–>Database(或者直接点击右侧边上的Database),在右侧打开的Database框里,点击左上角的+–>DataSource–>MySQL。2.填入自己的MySQL数据库信息(账户默认root,密码是自己设置的),Database里面填写要连接的数据库名称,填好后点击下方的TestConnection。3.这

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号