При попытке получить доступ к параметру маршрута, я получаю только часть этого и все после # обрезается

Question

У меня есть компонент, в котором пользователь должен написать свой боевой тег Blizzard, который имеет следующий формат:

DisplayName#1337

И по нажатию кнопки я запускаю функцию, которая отправляет пользователя по следующему URL:

www.example.com/user/DisplayName#1337

И на этом URL компонент извлекает параметр следующим образом:

displayName: this.$route.params.displayName

и затем я делаю GET-запрос к URL-адресу, например так:

axios.get('/User/SearchUsers?q=' + this.displayName)

Теперь проблема в том, что displayName содержит только то, что находится перед # в отображаемом имени. Поэтому, если пользователь набрал свой боевой тег TestTag#1337, displayName будет содержать только TestTag, а # 1337 будет утерян. Я предполагаю, что это происходит из-за символа #, но как мне этого избежать?

Answer 1

Полагаю, это происходит из-за символа #, но как мне этого избежать?

Ты не можешь. Но вы можете это исправить.

Объект $route предоставляет дополнительную информацию в пределах указанного URL, в вашем случае вам нужен хэш бит.

Расширение комментария Тайлера Ропера , вот подход Vue Router:

computed: {
  displayName() {
    return this.$route.params.displayName + this.$route.hash;
  }
}

Дает вам например TestTag # 1337 . Если хеш отсутствует, значение будет пустой строкой.

// /User/SearchUsers?q=TestTag#1337
axios.get('/User/SearchUsers?q=' + this.displayName);

Answer 2

При доступе к параметрам запроса вы используете? для указания первого параметра запроса и & для указания последующих параметров

Например

www.mySocialNetwork / membersList? Имя = Цукерберг и возраст = 21

Анализ самой строки зависит от вашего варианта использования и от того, используете ли вы фреймворк или библиотеку, например https://www.npmjs.com/package/query-string

в самом ванильном смысле вы можете хранить window.location.search

есть. const params = window.location.search

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

https://gomakethings.com/getting-all-query-string-values-from-a-url-with-vanilla-js/

или в большинстве браузеров:

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');