美文网首页
路由守卫

路由守卫

作者: 扶得一人醉如苏沐晨 | 来源:发表于2022-05-05 18:41 被阅读0次


在路由守卫中,只有next()是放行,其他的诸如:next('/logon') 、 next(to) 或者 next({ ...to, replace: true })都不是放行,而是:中断当前导航,执行新的导航next() 是放行,但是如果next()里有参数的话,next()就像被重载一样,就有了不同的功能。

1、全局路由守卫

添加meta属性,用于路由导航判断


添加notFound页面以及路由


在main.js文件中,添加全局路由守卫

添加判断


此时就要使用next({ ...to, replace: true })来确保addRoutes()时动态添加的路由已经被完全加载上去。

next({ ...to, replace: true })中的replace: true只是一个设置信息,告诉VUE本次操作后,不能通过浏览器后退按钮,返回前一个路由。

因此next({ ...to, replace: true })可以写成next({ ...to }),不过你应该不希望用户在addRoutes()还没有完成的时候,可以点击浏览器回退按钮搞事情吧。

其实next({ ...to })的执行很简单,它会判断:

如果参数to不能找到对应的路由的话,就再执行一次beforeEach((to, from, next)直到其中的next({ ...to})能找到对应的路由为止。

相关文章

  • vue的路由守卫

    路由守卫分3种:全局守卫路由独享守卫组件内的路由守卫 1.全局守卫:beforeEachbeforeResolve...

  • 路由守卫

    路由守卫分为三种 全局守卫: 路由独享守卫卸载route里 组件内守卫:写在组件配置对象里

  • [VUE]动态的更新页面的Title

    首先可以用路由守卫 + VueRouter来实现路由守卫相关文档1.main.js里加入路由守卫 // 页面修改时...

  • vue学习笔记(八)导航守卫(全局守卫,路由独享,组件内守卫)

    导航守卫-全局守卫 导航守卫-路由独享 导航守卫-组件内守卫

  • vue-路由导航守卫&异步组件

    导航守卫包括全局导航守卫、路由守卫、组件局部守卫 全局导航守卫 在全局导航守卫中,每次路由的跳转他们三个都会被触发...

  • Vue嵌套路由和路由守卫

    嵌套路由 路由守卫

  • vue路由守卫

    概念 路由守卫,官网也叫导航守卫,所谓导航,就是路由正在发生变化 路由守卫,主要就是用来通过跳转或取消的方式守卫导...

  • vue学习(52)vue-router(4)

    路由守卫作用:对路由进行权限控制分类:全局守卫、独享守卫、组件内守卫全局守卫(我们可以在meta中配置一些信息) ...

  • 路由

    全局守卫就是每一个路径进来都会经过这个全局守卫的处理 单路由守卫就是把守卫指定给某一个路由 组件内路由就是把守卫放...

  • vue-router 常见导航守卫

    全局守卫vue-router全局有三个守卫 路由独享守卫如果你不想全局配置守卫的话,你可以为某些路由单独配置守卫 ...

网友评论

      本文标题:路由守卫

      本文链接:https://www.haomeiwen.com/subject/lxgmyrtx.html