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 的新网址引导到另一个网页（而 demo2.vue 是表格视图， 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路由器查询字符串的Goolearching导致我认为没什么用处（可能是由于无知）......

Answer 1

案例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，您可以将ID设为$route.query.id，而在第二种情况下：/demo/demo2/:id，您将获得身份$route.params.id。

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

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

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

相应地加载组件

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

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

1 个答案:

案例1：

案例2：