如何配置 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 } });
    }
  }
}

我想要新的网址，其中?id=123添加，以引导到另一个页面（同时演示2.vue是表视图，demo2_id.vue应该在单击时显示并显示所单击的特定行的详细信息。

根据Vue 路由器文档 https://router.vuejs.org/en/essentials/dynamic-matching.html，当 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 }
];

谷歌搜索vue 路由器查询字符串导致我认为没有任何有用的东西（可能是由于无知）......

Case 1:

以下路线是两条相同的路线：

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

Case 2:

虽然以下有所不同：

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

第一种情况：/demo/demo2?:id=213，你可以得到 id 作为$route.query.id而在第二种情况下：/demo/demo2/:id，你会得到 id 作为 $route.params.id.

现在如果你想拥有路线如案例1：您将在路线文件和单个路线中拥有单行：

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

你可以编写代码来检测是否$route.query.id是否存在并相应地加载组件v-if https://v2.vuejs.org/v2/guide/conditional.html#v-if

如果你想拥有路线如案例2：您可以在路由文件中添加以上两行并将它们视为两条不同的路由。