vue3路由跳转params传参接收不到?

这篇具有很好参考价值的文章主要介绍了vue3路由跳转params传参接收不到?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、之前的用法

import { useRouter } from "vue-router";

const router = useRouter();
// 提现记录
const withdrawalClick = (item) => {
  router.push({ name: "Devwithdrawal", params: { name: 123 } });
};


//跳转页面接收参数
import { useRoute } from "vue-router";

const route = useRoute();
console.log(route.params);

这样路由可以跳转过去,但接收到了params是一个空对象。

二、解决方法

通过查找资料,发现了原因。

https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22

由于之前的params传参在页面刷新之后,参数会丢失,所以vue将这种方法移除了。

vue推荐的路由跳转传参方法:

1.使用query传递参数

2.使用vuex、pinia对参数进行存储

3.使用 History API 方式传递和接收文章来源地址https://www.toymoban.com/news/detail-530816.html


const router = useRouter();
// 提现记录
const withdrawalClick = (item) => {
  router.push({
    name: "Devwithdrawal",
    state: { obj1: { name: 1 }, obj2: { name: 2 } },
  });
};

// 收益记录
const revenueClick = (item) => {
  router.push({
    name: "Devwithdrawal",
    state: { obj3: { name: 3 } },
  });
};

//跳转页面接受参数
console.log(history.state);
vue跳转页面传参参数没带进来,vue3,vue.js,javascript,前端,Powered by 金山文档
vue跳转页面传参参数没带进来,vue3,vue.js,javascript,前端,Powered by 金山文档

到了这里,关于vue3路由跳转params传参接收不到?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React V6路由跳转,跳转传参(params,search,state)

    注意:以下代码为个人笔记,不全,需自行调整,方可使用 公共跳转方法

    2024年02月11日
    浏览(44)
  • vue3中使用router路由实现跳转传参

    大家好,今天和大家分享一下vue3中如何进行跳转并进行传参。 vue3取消了vue2部分api,所以路由跳转和传值的方式会有所不同。 我们今天主要讲router.push(location, onComplete?, onAbort?) vue3中新增API:useRouter和useRoute 1.首先在需要跳转的页面引入API—useRouter 2.在跳转页面定义router变量

    2023年04月09日
    浏览(41)
  • Vue Router不要再使用params传参了,params获取不到参数,官方删除params传参

    之前说过,vue路由传参有两种方式,分别是 query 和 params ;query是明文,params是隐藏的; 今天在使用params的时候发现获取不到参数了 我的写法: 1、 路由配置: 2、跳转: 3、接收: 4、结果: 得到一个警告和空对象 查看链接4.1.4更新日志发现官方做了删除替代,那这样的话

    2024年02月10日
    浏览(77)
  • vue通过router地址传参跳转同一路由页面,页面不刷新的解决办法

    vue、 vue-router@4 记录一下最近遇到的vue路由页面间的跳转的问题,其中就涉及到了不同路由的跳转(/a/b1 = /a/b2)、相同路由不同参数间的跳转(/a/b?c=1 = /a/b?c=2)、相同页面锚点跳转(/a/b#id1 =/a/b#id2) 原因:渲染的是同一组件 解决:可以在不刷新的页面通过监听route,重新加载

    2024年02月04日
    浏览(61)
  • 在vue3+ts项目里使用query和params传参

    一 query 传参 (类似get请求) query 传参方式① 传递方组件 home.vue 看下 router/index.ts 文件 有两个注意点 ① ref定义响应式基本类型数据后,修改和赋值要带上 .value ② query是一个对象类型 所以我们定义的基本类型数据不能直接赋值 要给对象式写法 {} 像以下两种写法都是报错的

    2024年01月17日
    浏览(33)
  • vue3在运行时路由可以正常跳转,但是页面空白,刷新页面恢复正常[已解决]

    vue3在运行时路由可以正常跳转,但是页面空白,刷新页面恢复正常,在网上寻找很久说是keepAlive的原因,后来看了看我的代码~ 原来的代码: 改后的代码: 由此可见,根元素一定要由一个div去包裹住! template必须有且只能有一个div 在这样才会正常显示~ 原理: 这里我们要先

    2023年04月27日
    浏览(59)
  • vue3.0+element Plus实现页面布局,侧边栏菜单路由跳转

    一. 先在router.js文件中配置路由,将侧边栏中需要跳转的页面都添加到children中 二. 在view目录下新建一个文件,里面包含侧边栏要跳转的页面 三.  页面样式布局 1. 我选择使用自定义组件BaseLayout.vue文件来设置header和aside样式显示 也可以使用element plus中的Container 布局容器 

    2024年02月13日
    浏览(50)
  • Vue3 - 实现路由 “新开一页“ 进行页面跳转功能,Router 路由跳转时在新窗口打开页面(网站跳转页面时浏览器新开页签打开网页,支持在页面、纯 js/ts 文件中使用,详细示例代码教程)

    网上这方面教程很少,本文提供多种解决方案,适用于任何场景。 本文 实现了在 vue3 项目开发中,当页面跳转时浏览器打开新窗口(新页签)跳转,Router 路由跳转并新开一页教程, 无论您是在普通页面、纯 js/ts 文件中,都可以使用, 如下图所示,当执行路由跳转时浏览器

    2024年02月03日
    浏览(66)
  • vue 发现页面找不到3秒后跳转到本页面

    这个路由跳转用到的是编程式跳转 this.$router.push 两种写法: 第一种可以通过 path 来跳转 goto(\\\'/find\\\') find是路由里边的路径 通过goto来绑定一个方法 里边传参 倒计时3秒 第二种通过name来跳转页面 在路由里边多写一行 name属性;并 修改goto里边的参数 ,其他都一样

    2024年02月12日
    浏览(49)
  • 【vue2第十七章】VueRouter 编程式导航跳转传参(点击按钮跳转路由和如何传递参数)

    如何在js进行跳转路由 在一些需求中,我们需要不用点击a标签或者router-link,但是也要实现路由跳转,比如登陆,点击按钮搜索跳转。那么这种情况如何进行跳转呢? 直接再按钮绑定的方法中写 this.$router.push(\\\'路由路径\\\') 即可。 代码示范 this.$router.push(\\\"/跳转路径\\\") 或者 this

    2024年02月09日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包