Как работать с параметрами фрагмента GET в Vue Router?

Попробовав внутреннюю реализацию Gitlab OAuth с помощью Web Application Flow, я попробовать неявный грант в моем интерфейсе Vue.

Код доступа, который мне отправляет API, имеет формат параметра URL-адреса фрагмента. Это означает, что он использует хеш-символ #foo=bar&moo=var вместо стандартного ?foo=bar&moo=var, который конфликтует с конфигурацией Vue Router по умолчанию.

После попытки режима истории в Vue Router, который не использует # в своих URL-адресах, Я могу получить доступ к параметру Vue Router с помощью $route.hash. Моя текущая проблема заключается в том, что я должен сам разделить и обрезать параметры примерно следующим образом:

const params = this.$route.hash.split('&').map(part => part.replace(/#/, ''));
const parsedParams = {};
params.forEach(param => {
  const parts = param.split('=');
  parsedParams[parts[0]] = parts[1];
});

который выводит { foo: "bar", moo: "var" }

Есть ли лучший или более стандартный способ работы с параметрами фрагмента в VueRouter? Если нет, есть ли стандартное решение для этого вне Vue?


gitlab vue.js vue-router oauth-2.0
person icosamuel    schedule 01.06.2018    source источник
comment
stackoverflow.com/questions/42309986/vuejs-get-url-query   -  person samayo    schedule 01.06.2018
comment
@samayo $route.query работает только для параметров, начинающихся с ?   -  person icosamuel    schedule 01.06.2018

Ответы (1)


arrow_upward
7
arrow_downward

Мне кажется, что мой фрагмент кода — достаточно хорошее решение, хотя я ожидал некоторой поддержки стандартов OAuth в vue. Может быть, мои ожидания слишком высоки?

Это то, что я в итоге использовал

const parsedParams = {};
this.$route.hash.split('&')
  .map(part => part.replace(/^#/, ''))
  .forEach(param => {
    const parts = param.split('=');
    parsedParams[parts[0]] = parts[1];
  });

вы также можете декодировать свои параметры непосредственно из этого цикла, используя

    parsedParams[parts[0]] = decodeURIComponent(parts[1]);
person icosamuel    schedule 04.06.2018
comment
спасибо, хотя я не уверен, как это повлияет на использование хеш-режима с vue-router. - person Exis Zhang; 22.10.2019
comment
в конце третьей скобки отсутствует .map(part => part.replace(/#/, '')) - person The Hog; 26.05.2020
comment
Вызов map удаляет хэши из любого места с любым именем или значением. Чтобы просто удалить хеш в начале строки, используйте: this.$route.hash.replace(/^#/, "") - person Graham Lea; 16.02.2021
comment
Вы также хотели бы сделать это: parsedParams[parts[0]] = decodeURIComponent(parts[1]); - person Daniel; 18.02.2021