Как во vue js менять значение переменной в зависимости от URL?

Question

[Капитан Какао]

Всем привет, подскажите плиз как в зависимости от URL менять данные в переменной?
То есть, если адрес такой: site.com в переменной {{ price }} выводим 100
Если адрес такой site.com?promo=50% в переменной выводим 50

Answer 1

[Александр]

https://codesandbox.io/s/qna-q952763-1d7b6

Comments

[Капитан Какао]

Офигеть, спасибо бро. Очень круто и в целом то что нужно. Но я так понял ты в скрипте описал всё буквально и сделал просчёт процента автоматически. То есть можно в URL указать 70% и цена будет 30.
На самом деле очень круто, но я бы хотел типа иметь просто ключ и значение.

К примеру у менять есть пару разных ключей и значений:
promo=sale
bloger=vasiliy

Им в переменную я задаю значение которое в последствии нужно подставить в {{ price }}

На PHP я делал это так:

if($_GET["promo"] === "sale" or $_GET["bloger"] === "vasiliy") {
    $price = 50;
}  else {
    $price = 100;
}

Могу ли я что-то похожее использовать во Vue?
В какую сторону капать, что гуглить, буду очень признателен за наводку или код пример.

[Александр]

Капитан Какао, Можно захордкодить значения конечно

import { ref } from "vue";

const promos = {
  "50%": 0.5,
  sale: 0.1,
};

export default {
  name: "App",
  setup() {
    const params = new URLSearchParams(window.location.search);
    const promo = params.get("promo");
    const percent = promos[promo] || 0;
    const price = 100;

    return {
      price: ref(price - price * percent),
    };
  },
};

Но лучше тогда делать запрос, и узнавать, есть ли скидка.

[Капитан Какао]

Александр, большое спаисбо!