使用导航守卫beforeEach自定义路由重定向路径

最新推荐文章于 2024-04-06 12:53:13 发布
最新推荐文章于 2024-04-06 12:53:13 发布
阅读量2.4k 收藏 1
点赞数
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014788505/article/details/121860546
版权 
// 重定向自定义
router.beforeEach(async(to, from, next) => {
    if (to.path == '/') {
        const  data = await getAllNeedRoutes()
        console.log(to,'to')
        console.log(data, 'data')
        // , query: JSON.stringify(to.query) 
        next({ path: data, query: to.query });
        return
    }
    if (sessionStorage.getItem('token')) {
        next()
    } else {
        next()
    }

notice：

这里我还遇到一个问题 就是路由死循环  切记导航守卫每一个分支都需要经过next()

next(参数)于next()完全不一样  

next()不会再次调用beforeEach; next(参数)会再次调用beforeEach 不小心就会进入死循环

zongfunday
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-router路由 重定向
技术改变世界
02-26 7568
1、main.js 判断跳转 import Vue from 'vue' import App from './App' import router from './router/common' import Dialog from 'hsy-vue-dialog' import store from './store/' import './config/style' import HappyS...
Vue:router的beforeEach与afterEach钩子函数
weixin_30267697的博客
01-16 903
在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。 定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。 总体来讲vue里面提供了三大类钩子，两种函数1、全局钩子2、某个路由的钩子3、组件内钩子 两种函数： 1、Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/ 2.Vue....
Vue Router 5个导航守卫（详解）
最新发布
weixin_44216637的博客
04-06 1056
导航守卫
router.beforeEach url携带参数跳转指定路由
qq_40295815的博客
10-20 3736
let redirecteds = { redirected: 111 } if (to.path === "/url" && Object.keys(to.query).length === 0) { next({ path: '/url', query: redirecteds }) return; }else{ next() return; }
路由重定向问题
CPUyi的博客
02-08 253
路由重定向问题
vue-router中beforeEach全局守卫，实现路由跳转登录验证
bob的博客
07-13 1060
在实际的项目中有些路由跳转需要设置一些权限 ：以后台管理系统为例，登陆成功以后才能进入后台页面： 以商城为例，购车需要登陆后才能查看 下面的代码可以实现每次的路由跳转拦截下来，进行身份验证 import ElementUI from 'element-ui' import http from './api/config' import mock from './mock' //用js-cookie来处理cookie import Cookie from 'js-cookie' rou...
Vue的路由动态重定向和导航守卫实例
08-27
下面小编就为大家分享一篇Vue的路由动态重定向和导航守卫实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在nuxt中使用路由重定向的实例
01-18
我们都知道，在写SPA的时候，我们可以通过配置vue-router来实现路由的重定向。 官方文档（以及ts类型）的定义中给出了这一选项： interface RouteConfig = { path: string, redirect?: string | Location | ...
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
08-27
在网站中普遍会遇到这样的需求，路由跳转前做一些验证，比如登录验证（未登录去登录页）。下面脚本之家小编给大家带来了使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能，感兴趣的朋友一起看看吧
vue 路由守卫(导航守卫)及其具体使用
10-15
主要介绍了vue 路由守卫(导航守卫)及其具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中的router路由守卫
qq_43714712的博客
09-11 226
基本套路是一样的，要看具体需求，编写路由访问权限 [1 ] 创建白名单列表（不需要token的） [ 2] js文件使用router和vuex对象，需要导入 [ 3] 使用beforeEach方法，传入3个参数，to,from,next [4 ] 根据具体业务需求编写逻辑代码 [ 4-1] 有token——>怎么做 [4-2 ] 无token——>干什么 // 权限控制 import router from '@/router'//路由对象 import store fr
router.beforeEach
myazwj的博客
10-06 937
router.beforeEach((to, from, next) => { // ... }) 里面的三个参数表示的是 o: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。 next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。 next(false): 中断当前..
vue 全局前置 路由守卫router.beforeEach(to,from,next)（在页面跳转前即路径都没改变前）
MCCLS的博客
07-31 5322
就比如当在当点击news和message时,需要学校为对应名字才能显示内容,否则就不行 所以我们可以在路由规则里面写入判断是否为对应信息,校验正确则进行显示 这时候路由配置要这样写 加入一个router.beforeEach 表示在初始化时候被调用和每次路由切换之前别调用 然后这里面有三个参数 一个为to 一个为from 一个为next 也就说to和from是把你要跳转到哪里,从哪边跳转过来都拿到 而现在相当于路由守卫把你的路由都给拦住了,所以我...
路由的钩子：（即导航守卫）
weixin_30699443的博客
05-17 402
路由的钩子：（即导航守卫） 1.全局的, const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 2.单个路由独享的 const router = new VueRouter({ routes: [ { path: '/fo...
vue中 router.beforeEach() 的用法
热门推荐
seimeii的博客
08-10 3万+
vue中 router.beforeEach() 的用法
2020/9/23面试问题
coucouxie的博客
09-24 247
Vue Router有哪几种导航钩子 全局守卫 全局前置守卫— router.beforeEach const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 全局解析守卫router.beforeResolve router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步
react路由守卫（路由拦截）
bright的博客
08-04 7760
react不同于vue，通过在路由里设置meta元字符实现路由拦截。在使用 Vue ，框架提供了路由守卫功能，用来在进入某个路有前进行一些校验工作，如果校验失败，就跳转到 404 或者登陆页面，比如 Vue 中的 beforeEnter 函数： ... router.beforeEach(async(to, from, next) => { const toPath = to.path; const fromPath = from.path; }) ... react实现路由拦截的基
Vue 导航解析流程 router.beforeEach使用避坑
weixin_63539078的博客
06-25 1463
Vue 导航解析流程 router.beforeEach使用避坑
beforeeach设置动态重定向
09-04
beforeEach是Vue Router中的一个导航守卫，用于在进入路由之前执行一些操作。在Vue Router中，可以使用beforeEach来设置动态重定向。 动态重定向意味着根据不同的条件或规则决定要将用户重定向到的不同路由。在beforeEach中，我们可以根据当前的路由信息和其他条件来进行判断，并通过调用next函数来进行重定向。 在beforeEach中，可以接收三个参数，分别是to、from和next。to参数表示即将进入的目标路由，from参数表示当前导航正要离开的路由。而next函数是必须调用的，它可以用来进行重定向。 要实现动态重定向，可以在beforeEach中根据特定的条件来调用next函数。例如，我们可以根据用户是否登录来进行重定向。如果用户已登录，则调用next函数并传入要进入的目标路由；如果用户未登录，则调用next函数并传入重定向的路由，让用户跳转到登录页面。 下面是一个示例代码，演示了如何在beforeEach中实现动态重定向： ```javascript router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated()) { next({ path: '/login', query: { redirect: to.fullPath } // 将目标路由信息传递给登录页面 }) } else { next() // 正常进入目标路由 } }) ``` 在上述代码中，我们通过判断目标路由的meta字段中是否设置了requiresAuth属性，并且用户尚未登录，来进行动态重定向。重定向到登录页面时，我们还通过query参数将目标路由信息传递给登录页面，以便在登录后能够自动跳转回原来要进入的目标路由。 通过在beforeEach中设置动态重定向，我们可以根据不同的条件来决定用户的路由跳转，从而实现更灵活和定制化的页面导航。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值