Невозможно выполнить маршрутизацию к маршруту, на котором я уже включен в router.beforeEach - PullRequest
Новая
       1

Невозможно выполнить маршрутизацию к маршруту, на котором я уже включен в router.beforeEach

1 голос
/ 14 июня 2019

У меня проблемы с маршрутизацией на маршрут, который уже используется при указании условия в router.beforeEach в моем приложении vue.

Вариант использования для этого заключается в том, что я хочу заблокировать доступ к маршруту и ​​перенаправить обратно на какой-либо произвольный маршрут, который я, возможно, уже использую при попытке доступа к новому маршруту.

Вот соответствующий код в 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: '/' });, это приведет меня к /, который, поскольку он не имеет прямого соответствия, будет направлять на маршрут *, который впоследствии перенаправит на мой /products маршрут. К сожалению, этого не происходит, и приложение застревает и не может успешно завершить маршрутизацию.

Кажется, я не могу отлаживать, поскольку после вызова next({ path: '/' }); он даже не вводит router.afterEach или beforeRouteEnter в моем Catalogue компоненте.

Что здесь может происходить?

Ошибки не регистрируются. Поскольку у меня есть спиннер с NProgress.start();, анимация застревает при вращении и никогда не останавливается.

Обратите внимание, что это работает правильно, когда я начинаю по маршруту, который отличается от /products, например /products/soylent-megafone.

...