vue3 vue-route4跳转新页面无法获取params参数

问题:vue3 vue-router4跳转新页面无法获取params参数

//跳转代码
router.push({
  name: 'newPage',
  params: {id : 1}
})
//接收代码
const res = router.currentRoute.value.params
console.log(res) 
#获得的值为{}

可能原因:在版本vue-router4.14后,未在路由文件中定义的params,是不能按照这种方式使用的。

解决办法:使用state传参

const params = {id:1}
router.push({
  name: "hrServiceInfo",
  //一定要使用 params
  state: { params }
})
const cellId = history.state.params.id
console.log(cellId)

参考链接:https://blog.youkuaiyun.com/qq_38666931/article/details/111308803

### 关于 `vue3-element-admin` 项目中的页面跳转实现 在 `vue3-element-admin` 中,页面之间的导航通常依赖 Vue Router 来完成。为了实现在组件内通过按钮触发的页面跳转,并可以携带参数给目标页面,推荐的做法是利用编程式的导航功能。 #### 编程式导航实例 当需要从当前页面跳转到另一个页面时,可以通过调用 `$router.push()` 方法来执行这一操作。如果希望向新页面传递一些必要的信息,则可以在路径后面附加查询字符串或是命名路由配合 params 参数一起使用[^4]。 下面是一个具体的例子展示如何在一个按钮点击事件处理器里设置这样的逻辑: ```javascript // 假设这是某个.vue 文件里的<script setup>部分或者是methods选项内的函数定义 import { useRouter } from &#39;vue-router&#39;; const router = useRouter(); function navigateToTargetPage() { const id = 123; // 这里假设我们要发送一个ID作为参数 // 使用path模式下的query方式进行简单传参 router.push({ path: &#39;/target&#39;, query: { paramId: id } }); } ``` 对于接收端即 `/target` 对应的目标页面来说,在其生命周期钩子或者组合API中读取这些参数就变得很重要了: ```javascript // 在目标页(.vue文件)内部获取上一页传来参数的例子 <template> <!-- 组件模板 --> </template> <script lang="ts"> export default defineComponent({ name: "TargetView", mounted(){ console.log(this.$route.query.paramId); // 输出URL上的查询参数 }, }); </script> ``` 此外,也可以采用更复杂的配置如带有动态段的名字路由以及 props 属性映射等高级特性来进行更加灵活的数据传输和处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值