Vue Router - проверка параметров в массиве

Question

У меня есть маршрут:

/browse/:type/:id?

Как я могу проверить, что :type находится в массиве допустимых значений?

Answer 1

Вы можете использовать Навигационные гвардии .

const router = new VueRouter({
    routes: [{
        path: '/browse/:type/:id?',
        component: Browse,
        beforeEnter: (to, from, next) => {
            let array = [1, 2, 4]
            if (array.indexOf(to.params.type) == -1)
                alert('Error');
            else
                next()
        }
    }]
})

Существуют и другие способы достижения этого, вы даже можете использовать глобальные защитные хуки для навигации, документы VueJS предоставили там очень хорошие примеры, я предоставлю вам ссылку в ответе выше.

Answer 2

Вы можете использовать beforeEnter крючок.

const router = new VueRouter({
  routes: [
    {
      path: '/browse/:type/:id',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

Затем вы можете проверить to:

to: Маршрут: целевой объект маршрута, к которому осуществляется навигация.

Вот документация: https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard