Как настроить маршрутизатор Vue для ответа на строки запроса?

Мой роутер настроен следующим образом. Он работает и делает то, что должен.

import Demo1 from "../vuex_modules/demo/demo1.vue"
import Demo2 from "../vuex_modules/demo/demo2.vue"

export const routes = [
  { path: "/demo/demo1", component: Demo1 },
  { path: "/demo/demo2", component: Demo2 }
];

Теперь мне нужно сопоставить мне несколько строк запроса. Когда я щелкаю в одном из представлений, направленных на выше, я хочу, чтобы объект, отправленный на маршрутизатор, выглядел так.

export default {
  methods: {
    clicky: function(row) {
      this.$router.push({ path: "", query: { id: row } });
    }
  }
}

Я хочу, чтобы новый URL-адрес с добавленным ? Id = 123 вел на другую страницу (а demo2.vue - это табличное представление, demo2_id.vue должен отображаться при щелчке мышью и содержать подробную информацию о выбранной строке.

Согласно документации по маршрутизатору Vue, я предполагаю добавить двоеточие когда часть URL является динамической. Я пробовал разные подходы, в том числе приведенный ниже. Однако меня не перенаправляют на запрошенную страницу. Вместо этого я все еще останавливаюсь на исходной странице.

import Demo1 from "../vuex_modules/demo/demo1.vue"
import Demo2 from "../vuex_modules/demo/demo2.vue"
import Demo2_Id from "../vuex_modules/demo/demo2_id.vue"

export const routes = [
  { path: "/demo/demo1", component: Demo1 },
  { path: "/demo/demo2", component: Demo2 },
  { path: "/demo/demo2?:id", component: Demo2_Id }
];

Поиск в Google строк запроса vue router не приводит ни к чему, что я могу считать полезным (возможно, из-за незнания) ...


javascript vue.js router vue-router
person Konrad Viltersten    schedule 15.12.2016    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Дело 1:

Следующие маршруты представляют собой два одинаковых маршрута:

{ path: "/demo/demo2", component: Demo2 },
{ path: "/demo/demo2?:id", component: Demo2_Id }

Случай 2:

Хотя следующие разные:

{ path: "/demo/demo2", component: Demo2 },
{ path: "/demo/demo2/:id", component: Demo2_Id }

В первом случае: /demo/demo2?:id=213, вы можете получить идентификатор как $route.query.id, а во втором случае: /demo/demo2/:id, вы получите идентификатор как $route.params.id.

Теперь, если вы хотите иметь маршруты, как в случае 1: у вас будет одна строка в файле маршрутов и один маршрут:

{ path: "/demo/demo2", component: Demo2 },

и вы можете написать код, чтобы определить, присутствует ли $route.query.id или нет, и соответственно загрузить компонент с использованием v-if

Если вы хотите иметь маршруты, как в случае 2: вы можете добавить две вышеупомянутые строки в файл маршрутов и рассматривать их как два разных маршрута.

person Saurabh    schedule 15.12.2016