如何配置Vue路由器响应查询字符串? [英] How to configure Vue router to respond to query strings?

问题描述

我的路由器配置如下.它可以工作并完成它应该做的事情.

My router in configured as follows. It works and does what it's supposed to.

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 }
];

现在，我需要匹配一些查询字符串.当我单击路由到上面的视图之一时，我希望推送到路由器的对象看起来像这样.

Now, I need to match me some query strings. When I click in one of the views routed to above, I want the object pushed to the router to look like this.

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

我希望添加了 ?id=123 的新 URL 指向另一个页面(而 demo2.vue 是表视图，demo2_id.vue 应该在点击时显示，并显示被点击的特定行的详细信息.

I want the new URL, with ?id=123 added, to lead to another page (while demo2.vue is the table view, demo2_id.vue is supposed to be displayed upon a click and present details for the particular row being clicked.

根据 Vue 路由器文档，我想当 URL 的一部分是动态的时添加一个冒号.我尝试了不同的方法，包括下面的方法.不过，我没有被路由到请求的页面.相反，我仍然停留在原始页面上.

According to Vue router docs, I'm suppose to add a colon when a part of URL is dynamic. I've tried different approaches, including the one below. I'm not routed to the page requested, though. Instead, I dwell still on the original page.

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 for vue router query strings leads to nothing that I can regard as useful (possibly due to ignorance)...

推荐答案

案例 1:

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

Case 1:

Following routes are two same route:

{ 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，您将获得 id 为 $route.params.id.

In first case: /demo/demo2?:id=213, you can get id as $route.query.id while in second case: /demo/demo2/:id, you will get id as $route.params.id.

现在，如果您想要路由，如情况 1:您将在路由文件和单个路由中拥有单行:

Now if you want to have routes as in case 1: You will have single row in routes file and single route:

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

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

and you can write code to detect whether $route.query.id is present or not and load component accordingly with use of v-if

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

If you want to have routes as in case 2: you can add above two lines in routes file and treat them as two different routes.

这篇关于如何配置Vue路由器响应查询字符串?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！