Vue Router语言 - 设置默认查询参数

Question

我正在实现一个分页列表。因此，我使用像?size=10这样的查询参数。此查询参数需要始终位于我的URL中(如/home?size=2)。

这个方法不工作:

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

我认为它是用一些参数实例化路由。查看vue devtools的Routing部分，我看到了一个空的查询对象:

$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

下面是使用beforeEachNavigationGuard的建议:

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()默认值的情况下正确实现这一点的唯一方法可能是使用导航守卫。你可以使用它们来获取当前在url中的查询参数，添加你需要的默认查询参数，然后返回新的路由。

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

如果你想通过pinia/vuex定制它们，你需要设置一个存储并让用户输入来更改设置。

注意:Pinia可能是更好的选择，因为它较新，在未来很长一段时间内仍将被支持