vue3 路由传参,参数隐藏不在地址栏显示(history)
点击按钮进行页面跳转
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 的传参(不在地址栏显示参数)。
基于 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
的传参方式允许你在页面间传递数据,但不会在地址栏中显示,它的核心是利用浏览器历史记录的状态来传递参数。