Динамический сегмент маршрутизатора Vue с парами

Динамический сегмент маршрутизатора Vue с парами

04.01.2020 10:33:06 Просмотров 27 Источник

Я пытаюсь создать маршрут, который может обрабатывать как динамические сегменты, так и принимать опоры маршрутизатора (params). Что-то вроде этого:

{ path: '/peer:body?', name: 'peer', component: () => import('pages/peer.vue'), props: true }

И в конце концов протолкнуть такой маршрут:

this.$router.push({ path: '/peer/' + row.body, name: 'peer', params: { row: row } })

К несчастью, я могу использовать только динамические сегменты, использующие pathв качестве свойства маршрута, или парамы, использующие nameв качестве свойства маршрута, но никогда одновременно.

У вопроса есть решение - Посмотреть?

Ответы - Динамический сегмент маршрутизатора Vue с парами / Vue Router dynamic segment with params

Michal Levý

05.01.2020 04:46:15

Во-первых, как вы уже упоминали, при построении "объекта дескриптора местоположения" для $router.push(или toprop of <router-link>), Вы можете использовать pathили name, а не оба одновременно (не имеет смысла делать это)

Во-вторых, вы можете передавать paramsтолько при использовании name(как описано здесь - абзац между первыми двумя образцами кода). Чтобы преодолеть это, вы можете использовать queryвместо paramsили построить весь path, включая params в строку URL.

И это подводит меня к самой важной части моего ответа. Похоже, что вы пытаетесь передать сложный объект как маршрут param (и в целевой компонент props). Хотя это технически возможно, это не очень хороший способ делать вещи. У вас нет места в вашем пути определения, где поместить контент такого параметра - он будет работать с push или нажатия <router-link> где параметр представлен как объект, но когда пользователь обращается к URL-адрес непосредственно (путем копирования и вставки URL-адрес, например), то страница будет нарушена, потому что параметр реквизит будет отсутствовать (так как он не может быть извлечен непосредственно из URL).

Так что мой совет-избегать этого. Поместите ваши данные во что-то вроде Vuex и вместо передачи всего объекта маршрутизатором передайте только какой-то идентификатор, который может быть включен в URL, извлечен маршрутизатором и передан в качестве опоры в целевой компонент. Затем ваш целевой компонент должен захватить Idи использовать его для запроса Vuex, чтобы получить необходимые ему данные...

Закрыть X