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

Posted 2023-02-22

【中文标题】如何配置 Vue 路由器以响应查询字符串？

【英文标题】：How to configure Vue router to respond to query strings?

【发布时间】：2017-05-01 06:30:59

【问题描述】：

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

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 是表格视图，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 路由器查询字符串的谷歌搜索导致我认为没有任何用处（可能是由于无知）...

【参考方案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的id，而第二种情况：/demo/demo2/:id，你会得到$route.params.id的id。

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

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

您可以编写代码来检测$route.query.id 是否存在，并使用v-if 相应地加载组件

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