динамический маршрутизатор vue - beforeEnter - бесконечный цикл при использовании next () - PullRequest
Новая
       15

динамический маршрутизатор vue - beforeEnter - бесконечный цикл при использовании next ()

0 голосов
/ 17 мая 2018

Я пытаюсь создать SPA, который показывает дилера в каждом штате Австрии. Например, если пользователь посещает example.com/vienna, он показывает каждого дилера в вене. Но если пользователь посещает example.com/paris, он все равно будет перенаправлен на динамический маршрут / Париж, но, конечно, ничего не будет показано.

Таким образом, мой подход состоял в том, чтобы проверить, доступно ли состояние, которое пользователь хочет найти, в списке состояний и, следовательно, направить его в доступное состояние или перенаправить его на страницу 404.

Если состояние доступно, оно работает, но если я попытаюсь перейти в несуществующее состояние, я застряну в цикле с next('/404')

export default new Router({
  routes: [{
      path: '/',
      name: 'Home',
      component: Home
    },{
      path: '/:region',
      component: RegionQuery,
      beforeEnter: (to, from, next) => {

        let isRegion = false;
        let allRegions = storeConfig.state.states;
        let toRegion = to.params.region;

        for(var i in allRegions){
          if(allRegions[i].route === toRegion){
            isRegion = true;
          }
        }

        if (isRegion) {
          next();
        } else {
          next('/404');
        }
      }
    },
    {
      path: '/404',
      name: '404',
      component: NotFound
    },
    {
      path: '*',
      redirect: '/404'
    },
  ],
})

Что я делаю не так или есть лучший подход к моей проблеме?

1 Ответ

0 голосов
/ 17 мая 2018

/404 соответствует /:region

Вам необходимо изменить порядок следования путей 

export default new Router({
  routes: [{
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/404',
      name: '404',
      component: NotFound
    },{
      path: '/:region',
      component: RegionQuery,
      beforeEnter: (to, from, next) => {

        let isRegion = false;
        let allRegions = storeConfig.state.states;
        let toRegion = to.params.region;

        for(var i in allRegions){
          if(allRegions[i].route === toRegion){
            isRegion = true;
          }
        }

        if (isRegion) {
          next();
        } else {
          next('/404');
        }
      }
    },
    {
      path: '*',
      redirect: '/404'
    },
  ]
...