路由不匹配时，不跳转或跳到指定页

最新推荐文章于 2025-03-03 16:58:00 发布

原创最新推荐文章于 2025-03-03 16:58:00 发布 · 429 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

本文探讨了当URL路由不匹配时的两种处理方式：一是自动重定向到首页，二是保持用户在当前页面，避免无目标的跳转。这两种策略在Web应用开发中常用于提供友好的用户体验。

当地址栏中随便输入的url，匹配不到时。
一、重定向到首页

{
  path: '*',
  redirect: '/Home',
},

二、留在当前页，不跳转

router.beforeEach((to, from, next) => {
    if (to.matched.length === 0) { //如果未匹配到路由
        from.name ? next({
            name: from.name
        }) : next('/'); //如果上级也未匹配到路由则跳转登录页面，如果上级能匹配到则转上级路由
    } else {
        next(); //如果匹配到正确跳转
    }
});