javascript - vue-router 重定向不适用于路由推送

标签 javascript vue.js vuejs2 vue-router

我配置了以下路由器:

const router = new Router({
  mode: 'history',

  routes: [
    // root
    {
      path: '/',
      component: ComponentPage,
      redirect: routePrefix.public,
      children: [

        // public
        {
          path: routePrefix.public,
          component: ComponentPage,
          redirect: `${routePrefix.public}/login`,
          children: [
            {
              path: `${routePrefix.public}/login`, component: LoginPage,
            }],
        },

        // private
        {
          path: routePrefix.private,
          component: ComponentPage,
          children: [
            {
              path: `${routePrefix.private}/u`, component: PrivatePage,
            }],
        }],
    }],
});

现在如您所见,有两个主要部分;一个是公共(public)的,一个是私有(private)的。 此外,我还配置了以下导航防护来进行授权:

router.beforeEach((to, from, next) => {
  console.log(`registered request to redirect from 
    '${from.fullPath}' to '${to.fullPath}'`);

  if (to.fullPath.startsWith(routePrefix.private) &&
    !Store.getters['auth/isAuthenticated']) {
    console.log('-> reroute to public main');
    next(routePrefix.public);
  } else if (to.fullPath.startsWith(routePrefix.public) &&
    Store.getters['auth/isAuthenticated']) {
    console.log('-> reroute to private main');
    next(routePrefix.private);
  } else {
    next();
  }
});

如果您想知道路由前缀是什么样的,请看这里:

const routePrefix = {
  public: '/p', private: '/x',
};

没什么特别的。

问题

我打开页面 localhost:8080/ ,该页面按预期将 / 重定向到 /p/login 。成功登录后,我执行 Router.push('/') ,目的是再次重新路由用户。

这个想法是 / 应该再次重定向到 /p/login,其中导航防护启动并将其重定向到 /x/...但事实并非如此。它停留在 / 上。

不是应该将其从主页重定向吗?我该如何修复它?

最佳答案

我没有找到解决这个问题的方法。通过直接插入到所需的目的地而不是让重新路由发挥其魔力,我已经达到了我的目标。这有效。

关于javascript - vue-router 重定向不适用于路由推送,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48606240/

相关文章:

javascript - 远程应用程序服务器后面的 Vuepress 为带有 iframe 的页面提供 404

javascript - Vue v-bind 复选框到数组内部的元素不起作用

javascript - 为什么 Knockout.js foreach 模板中的 $parent 绑定(bind)上下文为空?

javascript - 未捕获的类型错误 : undefined is not a function - Scrolling Script

javascript - vue-router 和 Laravel 的路由器之间的奇怪行为

javascript - 如何使用断点暂停我的代码 vuetify?

vue.js - Vuetify 如何添加自定义主题

Vue.js:防止用户在使用 Vue <transition> 转换元素时单击元素

javascript - 在菜单项上应用 css 单击

javascript - 我如何在浏览器端有效地处理巨大的javascript数组(2000万个坐标的数组)?