Store Query Sync 与 URL 状态
Store、Router、Query Sync 串联演示
搜索框走 500ms debounce,分类和分页走 throttle + history push。页面路径由 Router 控制,查询参数由 Store Query Sync 控制,二者共享同一条可分享链接。
当前路由:/examples/store-query-sync预期 Query:(空)
分类(throttle 180ms + push)
默认值不会写入 URL。
分页(throttle 180ms + push)
第 1 / 2 页
本地状态会立刻刷新卡片列表。
地址栏会按 debounce 或 throttle 的规则延后追上。
上面的预设链接会保持同一路由,只替换 query,用浏览器后退能看到 push 历史回放。
下方记录面板会直接捕获 pushState、replaceState 和 popstate,方便确认“下一页”是否真的入栈。
URL 写入记录分类 / 分页走 pushState,搜索走 replaceState。
暂无 URL 写入记录。点击“下一页”或切换分类后,会在这里看到入栈结果。
筛选结果
共 6 条,当前展示 3 条。
search=(空)tab=allpage=1
路由router-history
Router 历史模式拆解
对比 Web History 与 Hash History 在路径同步上的差异。
守卫router-guards
导航守卫与重定向
把 beforeEach、beforeEnter 和 afterEach 串成一次真实导航。
Storestore-rue
defineStore 对象配置写法
使用 state、getters、actions 组织集中式状态。