vue3 路由传参，参数隐藏不在地址栏显示（history）

TiAmo-_

已于 2024-01-24 10:45:43 修改

阅读量3.4k

点赞数 10

文章标签： vue.js

于 2024-01-24 10:32:17 首次发布

本文链接：https://blog.csdn.net/2301_76282668/article/details/135815801

版权

本文介绍了在Vue3中，如何通过HTML5HistoryAPI进行路由跳转时参数的隐藏传递，包括在组件间的参数传递方法、注意事项以及可能的浏览器兼容性问题。

摘要由CSDN通过智能技术生成

const SkipPage = (row) => {
    let obj = JSON.stringify(row)
    router.push({
        path: '/supplyDesc',
        state: { obj }
    })
}

onMounted(()=>{
  console.log(JSON.parse(history.state.obj))
})

在 Vue 3 中，通过路由导航传递参数的方式分为两种：基于 URL 的传参（例如使用路由的 params 或 query）和基于 HTML5 History API 的传参（不在地址栏显示参数）。

发起页面跳转： 在 handleClickc 函数中，通过 router.push 进行页面跳转。其中，state 是 HTML5 History API 提供的一个参数，允许你在页面之间传递数据，但不会在地址栏中显示。state 属性的值应该是一个对象，用来传递参数。
接收参数： 在目标页面中，你可以通过 history.state 访问到上一个页面传递的参数。history.state 对象包含在 HTML5 History API 中，它提供了对浏览器历史记录条目的访问。在你的代码中，在组件的 onMounted 钩子中使用 history.state.obj 访问了传递过来的参数对象。

使用 router.push 中的 state 参数，你可以传递任意类型的数据对象，但是要注意浏览器的兼容性问题。在一些较旧的浏览器中可能不支持这些新的 HTML5 History API。
由于 history.state 在某些情况下可能会受到浏览器或路由器的限制（例如在刷新页面后可能会丢失状态），对于复杂的应用场景，可能需要考虑其他状态管理方式，比如 Vuex。

总的来说，通过 HTML5 History API 的传参方式允许你在页面间传递数据，但不会在地址栏中显示，它的核心是利用浏览器历史记录的状态来传递参数。

关注