如何配置 Vue 路由器响应查询字符串？

Question

我的路由器配置如下。它可以正常工作并发挥应有的作用。

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 的新 URL 以指向另一个页面（而 demo2.vue 是 table 视图，demo2_id.vue 应该在单击时显示并显示被单击的特定行的详细信息。

根据 Vue router docs，我想在 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 路由器查询字符串 没有任何我认为有用的东西（可能是由于无知）...

Answer 1

案例一：

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

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

案例二：

虽然以下是不同的：

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

第一种情况：/demo/demo2?:id=213，你可以获得$route.query.id的id，而第二种情况：/demo/demo2/:id，你将获得$route.params.id.[=19的id =]

现在，如果您想要 路由，如案例 1：您将在路由文件和单个路由中有单行：

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

并且您可以编写代码来检测 $route.query.id 是否存在，并使用 v-if

相应地加载组件

如果你想要路由，如情况2：你可以在路由文件中添加以上两行，并将它们视为两条不同的路由。

如何配置 Vue 路由器响应查询字符串？

How to configure Vue router to respond to query strings?

javascript

router

vue.js

vue-router

案例一：

案例二：