✨URL状态同步

  • URL作为单一数据源：将路由参数作为应用状态的权威来源

  • 状态持久化：页面刷新后能够恢复之前的状态

  • 无Cookie依赖：完全基于路由参数实现状态管理

问题复现：

同一页面中，使用了ant design vue 的Tabs标签页组件，我们会设定一个activeKey，并且绑定一个切换面板的回调事件，这里我绑定的activeKey为路由路径，例如：

 <a-tabs v-model:activeKey="activeKey" @change="onChange">
        <a-tab-pane key="/article">
          <template v-slot:tab>
            <ReadOutlined/>
            文章
          </template>
          <ArticleList/>
        </a-tab-pane>
   </a-tabs>
{
        path: '/:category',
        name: 'Category',
        component: IndexPage
    }
//改变tab栏触发事件
const onChange = (key) => {
  router.push({
    path: `${key}`,
    query: {
      text: searchParam.text
    }
  })
}

当切换面板，相应的路由已经改变，但是我们一刷新页面，activeKey又初始化了，也就是又恢复了默认值。

💡解决方案

使用Watch函数进行监听路由变化

// 页面加载时同步路由路径到activeKey
watch(
    () => route.path,
    (newPath, oldPath) => {
      activeKey.value = newPath
    },
    {
      immediate: true //立即执行一次
    }
);

分页参数也可以按照这种方式进行持久化处理，这样就避免，一刷新页面又回到了第一页