Маршрутизация vue.js с необязательными параметрами и в любом порядке

Я хотел бы иметь параметры запроса в моем приложении Vue.JS, использующем vue-router, например:

http://localhost:8080/#/home/name=Alice&surname=Smith

Я добавил этот маршрут к моему routes в router.ts:

 routes: [{
    path: '/home/name=:name&surname=:surname',
    name: 'home',
    component: Home
 }]

Еще я хочу сделать следующие две вещи:

1) Я хочу иметь возможность иметь параметры name и surname в любом порядке. Например. эти два URL-адреса должны вести к одному и тому же виду:

http://localhost:8080/#/home/name=Alice&surname=Smith
http://localhost:8080/#/home/surname=Smith&name=Alice

2) Я хочу, чтобы они тоже были необязательными.

Есть ли способ сделать это? Спасибо!

Вы смешиваете и сопоставляете параметр запроса с атрибутами маршрута. Они не взаимозаменяемы.

Stephan-v 10.08.2018 15:06
2
1
2 336
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы реализовать то, что вы хотите, вам нужно изменить маршрут:

routes: [{
    path: '/home',
    name: 'home',
    component: Home
}]

Откройте этот маршрут с параметрами запроса:

router.push({ name: 'home', query: { name: 'Alice', surname: 'Smith' }});

URL-адрес будет (порядок ключей запроса в URL-адресе не имеет значения):

http://localhost:8080/#/home?name=Alice&surname=Smith

И внутри маршрута вы можете получить параметры запроса как this.$route.query.name и this.$route.query.surname.

Проверьте документация, чтобы получить больше информации.

Большое спасибо за ваш ответ. Я все еще не понимаю, как делать ставки. Таким образом можно было бы предоставить какие-либо значения URL-адресу и отразить его в моем представлении? Я бы хотел, чтобы имя и фамилия предоставлялись пользователем через URL-адрес и менялись на лету.

luthien 14.08.2018 10:05

Здравствуй. Если у вас все еще есть проблемы, не могли бы вы описать детали более точно? Мой ответ должен решить обе ваши проблемы из вашего основного вопроса. Можете ли вы пошагово описать, как работает ваш код, и что вы собираетесь делать с параметрами запроса (имя, фамилия) в конце? (будет идеально, если вы сможете показать часть кода)

Max Martynov 15.08.2018 15:03

Мне удалось решить мою проблему, имея только один параметр с именем query, а затем проанализировав его содержимое в части JS. Спасибо вам за помощь.

luthien 17.08.2018 11:17

Другие вопросы по теме