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

最新推荐文章于 2025-05-14 08:00:00 发布

zongfunday

最新推荐文章于 2025-05-14 08:00:00 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/u014788505/article/details/121860546

本文探讨了Vue应用中路由守卫的使用，特别关注beforeEach钩子函数在处理重定向时可能导致的路由死循环问题。作者提醒开发者注意next函数的正确使用，避免在每个分支中不恰当的调用next导致无限循环。同时，文章强调了在守卫函数中每个分支必须调用next的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 重定向自定义
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 不小心就会进入死循环