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
不存在时向路由添加一个默认查询参数。
我正在实现一个分页列表。因此,我使用了 ?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
不存在时向路由添加一个默认查询参数。