时间戳

首页 > 解决方案 > 如何重定向到 Framework7 路由器中的另一个路由？

javascript - 如何重定向到 Framework7 路由器中的另一个路由？

问题描述

我在我的项目中将 Framework7 与 Vue 一起使用，并且在使用非常基本的东西时遇到了麻烦。在我的 f7 路由中，我希望在一个/路由上设置一个守卫，它检查用户是否已登录，然后重定向到/home/另一个，否则重定向到登录屏幕/login/。但是使用当前设置重定向不起作用。任何想法为什么？

routes.js

const routes = [
  {
    path: '/',
    async: function (routeTo, routeFrom, resolve, reject) {
      if (isUserLoggedIn()) {
        console.log(`*** redirecting to /home/`);
        resolve({redirect: '/home/'});
      } else {
        console.log(`*** redirecting to /login/`);
        resolve({redirect: '/login/'});
      }
    },
  },
  {
    path: '/login/',
    loginScreen: Login,
    on: {
      pageBeforeIn: function (event, page) {
        console.log(`*** /login/ onBeforeIN`);
        // never called
      }
    }
  },
  {
    path: '/home/',
    component: HomePage,
    on: {
      pageBeforeIn: function (event, page) {
        console.log(`*** /home/ onBeforeIN`);
        // never called
      }
    }
  }
];

标签： javascriptvue.jshtml-framework-7

解决方案

弗拉德本人在 F7 论坛上回答：

async不适用于重定向，您需要为此使用路由的 beforeEnter （https://framework7.io/docs/routes.html#route-before-enter-leave 1 ）：

beforeEnter(to, from, resolve, reject) {
  const router = this;
  if (/* need redirect */) {
    reject();
    router.navigate('/another-path/');
    return;
  }
  resolve();
}

除此之外，我的问题是我所拥有loginScreen: Login,的而不是component: Login,登录路径。

进行这两项更改确实解决了问题。

推荐阅读