Vue Router - 设置默认查询参数

Vue Router - Set default query parameters

我正在实现一个分页列表。因此,我使用了 ?size=10 之类的查询参数。此查询参数需要始终在我的 URL 内(例如 /home?size=2)。

此方法无效:

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

如何为我的路线设置默认查询参数?

无需在每个 router.push() 中定义默认值即可正确实现此目的的唯一方法可能是使用 Navigation Gurads。您可以使用它们获取当前在 url 中的 query-parameters,添加您需要的默认 query-params,然后 return 新路由。

虽然我不会这样做,但这可能是实现此目的的最简单方法。

如果您想通过 pinia/vuex 自定义它们,您需要设置商店并进行用户输入以更改设置。

Note: Pinia is most likely the better option, because it is newer and will still be supported far in the future

这是使用 beforeEach 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 不存在时向路由添加一个默认查询参数。