VUE路由器 - 设置默认查询参数

Question

我正在实施分页列表。因此，我正在使用查询参数，例如？size = 10。此查询参数需要始终在我的URL内（例如 /home？size = 2）。

此Apporach无法正常工作：

const routes = [{ path: "/home", query: { size: "10" }, components: MyPage }];
const router = createRouter({
  history: createWebHistory(),
  routes,
}); 

我认为它正在用一些参数实例化路线。查看Vue DevTools的路由部分向我展示了一个空的查询对象：

$route:/home
  fullPath:"/home"
  path:"/home
  query:Object (empty)
  hash:""
  name:undefined
  params:Object (empty)
  matched:Array[0]
  meta:Object (empty)
  redirectedFrom:undefined
  href:"/home

如何将默认查询参数设置为我的路由？

Answer 1

这是使用theeach navigationguard的建议：

const routes = [{ path: "/home", name: "Home", components: MyPage }];

const router = createRouter({
  history: createWebHistory(),
  routes,
}); 

router.beforeEach((to, from) => {
  if(to.name === "Home" && !to.query.hasOwnProperty("size")){
      to.query.size = "10"
  }
})

这个想法是在不存在的情况下添加size的默认查询参数。

Answer 2

正确实现此目的的唯一方法而不定义每个router.push（）中的默认值可能是导航gurads 。您可以使用它们来获取当前在URL中的查询参数，添加所需的默认查询 - 帕拉姆，然后返回新路由。

尽管我不会这样做，但这可能是实现这一目标的最简单方法。

如果您想通过

注意：Pinia很可能是更好的选择，因为它是新的，并且在将来仍然会得到很远的支持