R后悔药 Rue.js
  • 首页
    • 深度指南
    • 实战例子
    • 快速上手
    • 路由指南
    • 术语表
    • 错误代码参考
  • API
    • 合作伙伴
    • 插件
    • 组件库
    • 工具链
    • Text.js
    • 新闻简报
    • 常见问题
    • 团队
    • 版本发布
    • 社区指南
    • 行为规范
    • 隐私政策
  • 赞助
  • 合作伙伴
设置
目录统计
总条目95
  • 你好,世界
  • 处理输入
  • Attribute 绑定
  • 条件与循环
  • Compiled 顶层控制流
  • 表单绑定
  • 简单组件
  • useApp().component 注册
  • Reactive Props Destructure
  • Props 与 useSetup
  • Slots 插槽
  • 原生 Web Components
  • Web Components 分项测试
  • 基础元素与自闭合标签
  • 表达式与插值
  • 属性、className、style 与 Props
  • 对象展开属性(spread props)
  • 条件渲染(?:、&&、null)
  • v-if / r-if 指令
  • v-show / r-show 指令
  • v-pre / r-pre 指令
  • v-once / r-once 指令
  • v-memo / r-memo 指令
  • v-text / r-text 指令
  • v-html / r-html 指令
  • v-on / r-on 指令
  • v-model / r-model 指令
  • 列表渲染与 key
  • v-for / r-for 指令
  • Template 无包装容器
  • Scoped Style 组件作用域样式
  • Fragments(<> … </>)
  • children 插槽与嵌套
  • 组件与 Props 传递
  • 动态组件(Component)
  • Suspense 异步边界
  • 异步组件懒水合
  • 事件处理
  • 受控输入
  • Refs 基础
  • Markdown 编辑器
  • 获取数据
  • 服务端预取
  • 资源
  • 资源(纯 JSX)
  • Context
  • 语言切换(_ 模型)
  • 路由 Demo:总览(嵌套路由)
  • 路由 Demo:守卫(beforeEnter)
  • 路由 Demo:实验页(受守卫保护)
  • 基础计数器
  • shallowRef 浅层 ref
  • triggerRef 手动触发
  • onActivated 缓存生命周期
  • Signal 路径读写
  • 独立 Signal 与派生值
  • isRef 判定示例
  • 无代理状态模型
  • 只读派生值
  • nextTick 真实业务场景
  • onScopeDispose 作用域清理
  • 渲染函数计数器
  • onRenderTriggered 调试
  • onDeactivated
  • onErrorCaptured 错误捕获
  • useState 计数器
  • useState 与局部快照
  • 条件渲染
  • map 列表渲染
  • JSX 数组子节点
  • 组件插槽中的 JSX 数组
  • Todo 应用
  • 基础待办事项
  • 本地待办事项
  • 用户资料编辑
  • useState 数组
  • useState 对象
  • 本地 ref 计数器
  • 排序、筛选与网格
  • Store Query Sync 与 URL 状态
  • 树状视图
  • SVG 图表
  • SVG 共享标签命名空间
  • 带过渡动效的模态框
  • Transition mode
  • 子调父方法
  • 父控子计数
  • 组件级 v-model
  • 命名 v-model
  • 组件 emit
  • Hello children
  • 基础 children Box
  • 嵌套 children Box
  • Layout children
  • 过渡动效

Store Query Sync 与 URL 状态

Store、Router、Query Sync 串联演示

搜索框走 500ms debounce,分类和分页走 throttle + history push。页面路径由 Router 控制,查询参数由 Store Query Sync 控制,二者共享同一条可分享链接。

当前路由:/examples/store-query-sync预期 Query:(空)
Router 预设Store 预设Runtime 预设
分类(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 组织集中式状态。

页内导航
  • Store、Router、Query Sync 串联演示
    • 筛选结果
文档
  • 深度指南
  • 实战例子
  • 快速上手
  • 术语表
  • 错误码参照表
关于
  • 常见问题
  • 团队
  • 版本发布
  • 社区指南
生态
  • 插件
  • 组件库
  • 路由指南
  • Text.js
© 2024-2026 Xiangmin Liu
Rue.JS