history.state 无法传参ref值

这是因为 `history.state` 只能存储 JSON-serializable 数据，而 `ref` 是一个对象，不能被 JSON 序列化。如果你需要在历史记录中存储一个对象引用，可以考虑使用一个唯一的标识符，并将它存储在 `history.state` 中，然后在需要使用该对象时，使用该标识符来获取它。

例如，你可以将 `ref` 的 `id` 属性存储在 `history.state` 中：

const id = ref.id
history.pushState({ id }, '', '/new-url')

然后，你可以在新的页面中使用该 `id` 来获取相应的对象：

const id = history.state.id
const ref = document.getElementById(id)

相关问题

history.push 如何传参

使用 `history.push` 方法可以将用户导航到新的路由，并且可以向新的路由传递参数。在 `react-router-dom` 库中，可以通过将参数添加到路由路径中的方式来传递参数。

具体用法如下：

1. 在定义路由时，使用 `:` 符号指定参数占位符：

   <Route path="/user/:id" component={User} />

在上面的例子中，我们定义了一个名为 `id` 的参数占位符，它可以匹配任意字符串。

2. 在调用 `history.push` 方法时，将参数添加到路由路径中：

   history.push(`/user/${userId}`);

在上面的例子中，我们将 `userId` 变量的值添加到路由路径中，以便在新的路由中访问该参数。

3. 在新的路由组件中，通过 `props.match.params` 对象获取参数值：

   function User(props) {
     const { id } = props.match.params;
     // 使用参数值进行渲染
     return (
       <div>
         <h2>User ID: {id}</h2>
       </div>
     );
   }

在上面的例子中，我们在 `User` 组件中通过 `props.match.params` 对象获取路由参数的值，并使用该值进行渲染。

需要注意的是，路由参数可以是任意字符串，包括数字、字母和特殊字符。但是，在将参数添加到路由路径中时，需要将参数值进行编码，以避免特殊字符导致的路由匹配问题。可以使用 `encodeURIComponent` 方法对参数值进行编码。例如：

const userId = encodeURIComponent('123#abc');
history.push(`/user/${userId}`);

在上面的例子中，我们对 `userId` 变量的值进行了编码，以避免 `#` 符号导致的路由匹配问题。在 `User` 组件中使用 `decodeURIComponent` 方法对参数值进行解码即可。

vue-router.mjs:35 [Vue Router warn]: history.state seems to have been manually replaced without preserving the necessary values. Make sure to preserve existing history state if you are manually calling history.replaceState: history.replaceState(history.state, '', url)

这是 Vue Router 给出的一个警告，意思是你可能在手动调用 `history.replaceState` 的时候替换了 `history.state`，而没有保存必要的值。如果你确实需要手动调用 `history.replaceState`，则需要在第一个参数中传入 `history.state`，以保留现有的历史状态。例如：

history.replaceState(history.state, '', url)

这样做可以避免 Vue Router 报出这个警告。如果你不需要手动调用 `history.replaceState`，则可以忽略这个警告。