Question

在vue应用程序中的router.beforeEach中指定条件时，我无法路由到已经使用的路由。

这种情况的用例是我想阻止对路由的访问，并重定向回任意路由，当我尝试访问新路由时可能已经启用了该路由。

这是router.beforeEach

中的相关代码

NProgress.start();
//code removed for brevity    
if (to.matched.some(route => route.meta.role)) {
       next({ path: '/' });
}

这是我的路线...

const routes = [
    { path: "/products", component: Catalogue },
    { path: "/products/:slug", component: Product },
    { path: "/cart", 
      component: Cart, 
      meta: { role: "Customer" } },
    {
      path: "/checkout",
      component: Checkout,
      meta: { requiresAuth: true, role: "Customer" }
    },
    {
      path: "/account",
      component: Account,
      meta: { requiresAuth: true, role: "Customer" }
    },
    { path: "*", redirect: "/products" }
];

我希望，如果我在拨打/products时在next({ path: '/' });路线上，这会将我路由到/，因为它没有直接匹配项，因此会转到{{ 1}}路由，该路由随后重定向到我的*路由。不幸的是，这种情况不会发生，并且应用程序会卡住并且无法成功完成路由。

调用/products后似乎也无法调试，甚至没有在next({ path: '/' });组件上输入router.afterEach或beforeRouteEnter。

这可能是怎么回事？

没有记录错误。因为我有一个来自Catalogue的微调器，所以动画陷入了旋转，并且永不停止。

请注意，当我从NProgress.start();之类的不同于/products的路线开始时，此方法可以正常工作

无法路由到我已经在router.beforeEach中的路由

0 个答案: