Vue Router4中params传参失效和报错问题的解决方法
问题描述
在使用vue-router4中params 进行路由组件之间传参,跳转页面接收不了并出现如下错误
如下是我的代码
传输页面
router.push({ name: "postBlog", params: { dialogVisible: true, data: data, }, });
接收页面
import { useRouter } from "vue-router"; const route = useRouter(); const dialogVisible = ref(false) console.log(route.params)
原因分析:
点开链接后发现了原因, 点击查看更新日志
也就是说,从Vue Router的2022-8-22 这次更新后,我们使用上面的方式在新页面无法获取
解决方案:
vue也给我们提出了代替方案:
- 使用 query 的方式传参
- 将参数放在 pinia 或 vuex仓库里
- 使用动态路由匹配
- 传递 state,在新页面使用 History API 接收参数
- 使用 meta 原信息方式传递 (此方式更适用于路由守卫)
使用动态路由匹配
如果传递参数较少的情况下,可以尝试使用下面这种方式,只要修改一下path定义部分就可以了:
// params 传递的参数: { id: '1', name: 'ly', phone: 13246566476, age: 23 } { path: '/detail/:id/:name/:phone/:age', name: 'detail', component: () => import('@/views/detail/index.vue') }
查看页面效果,控制台警告也消失了:
注意,如果使用使用了这种动态路由匹配方式, path: ‘/detail/:id/:name/:phone/:age’ ,中这三个参数你都必须传递,否则会报错:
使用HistoryAPI方式传递和接收
在跳转前的页面使用 state 参数:
<script setup> import { useRouter } from 'vue-router' const router = useRouter() const params = { id: '1', name: 'ly', phone: 13246566476, age: 23 } const toDetail = () => router.push({ name: 'detail', state: { params } }) </script> <template> <el-button type="danger" @click="toDetail">查看情页</el-button> </template>
跳转的后页面接收:
<template> <div>{{ historyParams }}</div> </template> <script setup lang="ts"> const historyParams = history.state.params console.log('history.state', history.state) </script>
以上就是Vue Router4中params传参失效和报错问题的解决方法的详细内容,更多关于Vue params传参失效和报错的资料请关注脚本之家其它相关文章!
最新评论