vue router /: param с косой чертой

Question

У меня есть такой роутер:

routes: [
    {
      path: '/survey/:surveyHash',
      name: 'survey',
      component: Survey,
      props: true,
    },

В компоненте я пытаюсь получить surveyHash в подпорках.Проблема в том, что я не могу сделать это, когда внутри surveyHash.

есть / косые черты. Есть ли решение в vue-router?

Answer 1

Есть более элегантное решение.Маршрутизатор Vue использует модуль path-to-regexp под капотом, и у него есть для этого готовое решение

const regexp = pathToRegexp('/:foo*')
// keys = [{ name: 'foo', delimiter: '/', optional: true, repeat: true }]

https://github.com/pillarjs/path-to-regexp#zero-or-more

const regexp = pathToRegexp('/:foo+')
// keys = [{ name: 'foo', delimiter: '/', optional: false, repeat: true }]

https://github.com/pillarjs/path-to-regexp#one-or-more

Answer 2

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

routes: [
    {
      path: '/survey/:surveyHash(.*)',
      name: 'survey',
      component: Survey,
      props: true,
    },

С этим вы получите оставшуюся часть URL, включая косую черту, в surveyHash