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

У меня есть форма, которая должна перенаправлять пользователей с одного маршрута на другой. Я хочу, чтобы это перенаправление основывалось на выборе переключателя.

        <select v-model = "selected">
          <option value = "select1"Go to select1 component</option>
          <option value = "select2">Go to select2 component</option>
          <option value = "select3">Go to select3 component</option>
        </select>

Этот элемент select находится в форме, поэтому у меня есть кнопка отправки/сохранения в конце. У меня также есть еще 3 компонента для перенаправления. Когда пользователь выбирает первый и нажимает «Сохранить», я хочу перенаправить его на компонент select1, а если он выберет второй, перейти ко второму и т. д.

Как настроить ссылку на мой маршрутизатор на основе этого выбора?

vue.js select vue-router

25.12.2020 09:29

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

491

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Предполагая, что у меня есть следующие маршруты.

const routes = [
  {
    name: "select1",
    path: "/select1",
    component: Select1
  },
  {
    name: "select2",
    path: "/select2",
    component: Select2
  }
];

с ниже выберите раскрывающийся список

<select v-model = "selected">
          <option value = "select1"Go to select1 component</option>
          <option value = "select2">Go to select2 component</option>
          <option value = "select3">Go to select3 component</option>
</select>

мы можем использовать метод route api push для программной навигации.

watch: {
    selected: function (val, oldVal) {
       /either of below can be used
      // this.$router.push({ val }); // by route name
      // this.$router.push({ path: `/${val}` }); //by route path
    },

Спасибо за поддержку, она мне очень помогла. Кстати, я сказал, что они переключаются, когда объясняю вопрос. Извините за то, что это был выпадающий список с 3 вариантами :)

— 25.12.2020 10:18

он также будет работать с переключателем. Пожалуйста, не забудьте проголосовать :)

— 25.12.2020 10:25

25.12.2020 10:00