1.问题:

使用params方式传参时(参数不显示的方式)

获取参数时,参数undefined

2.解决:

push时请使用name,不要使用path(路由的params对象使用,必须通过路由名name来调用路由)

this.$router.push({
   name: 'test',
params: {
    id: 1
   }
})

接收参数

this.$route.params.id

3.注意:

  • params传参,页面刷新后参数失效;
  • query传参,页面刷新后参数不会失效,参数被拼接在url

结束

vue路由params传参时出现undefined的更多相关文章

  1. vue路由组件传参

    在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 使用 props 将组件和路由解耦: 取代与 $route 的耦合 const ...

  2. vue 路由动态传参 (多个)

    动态传参 传值页面  客户列表clientList.vue 路由 router.js 配置路由 接收参数的页面  客户详情CustomerDetails.vue 通过this.$router.para ...

  3. vue 路由 URL传参

    源码如下: import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) //全局使用该组件 const ro ...

  4. Vue路由query传参

    1.不要进行过深的嵌套 let id = 'uyu' this.$router.push({ path: '/mrp_detail', query: { re_order_id: id, option ...

  5. axios 的 get 方法 params 传参 400 的问题

    axios 的 get 方法 params 传参,在输入框中输入某些特殊字符 例如中括号,请求时会直接报 400 错误,Bad Request. 原因:axios 的 get 方法,在使用 param ...

  6. vue刷新子页面,跳到主页,params传参引起的血案!

    今天,算是真正认识了params传参,为什么说params传参引起了血案? 起因是这样的,我正在做一个登陆的模块,公司想根据url不同的参数来区分是什么类型的会议, 于是后端推荐我用params传参的 ...

  7. vue query或params传参

    1.query 传递端: this.$router.push({ path:"/AccountFP", query:{ id:row.id, userId:row.userId } ...

  8. vue router使用query和params传参的使用

    传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,希望可以帮到大家. Vue ...

  9. Vue学习之路由vue-router传参及嵌套小结(十)

    一.路由传递参数: 1.使用query传值: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  10. vue-router query和params传参(接收参数)$router $route的区别

    今天做项目时踩到了vue-router传参的坑(query和params),所以决定总结一下二者的区别. 直接总结干货!!! 1.query方式传参和接收参数 传参: this.$router.pus ...

随机推荐

  1. NTRU

    介绍 NTRU(Number Theory Research Unit),NTRU是一个带有专利保护的开源公开密钥加密系统,使用基于格的加密算法来加密数据.它包括两部分算法:NTRUEncrypt用来 ...

  2. Python代码覆盖率工具之Coverage

    Python代码覆盖率工具之Coverage 在软件开发过程中,确保代码覆盖率是质量控制的关键一环.通过测量代码覆盖率,开发者可以了解哪些部分的代码正在被测试执行,哪些部分尚未被覆盖,从而优化测试策略 ...

  3. THUWC2025 游记

    Day -C 先进入金国大臣面积群,然后发现 xyf 又在行联考学生群故事. Day -1 早上赶飞机进京.飞机上启动钢丝.到达大兴机场之后坐火车前往北京西站,然后坐地铁到海淀黄庄.非常饿,但是决定先 ...

  4. LangChain基础篇 (05)

    LangChain 核心模块:Data Conneciton - Document Transformers 一旦加载了文档,通常会希望对其进行转换以更好地适应您的应用程序. 最简单的例子是,您可能希 ...

  5. 松下机器人示教器AUR01062触摸无反维修

    Panasonic松下机器人示教器AUR01062触摸无反应解决方案 松下机器人示教器现象:触摸屏幕时鼠标箭头无任何动作,没有发生位置改变. 原因:造成此现象产生的原因很多,下面就松下机器人维修中示教 ...

  6. hbase - [03] 客户端常用命令(hbase shell)

    1.列出所有namespace list_namespace 2.创建namespace create_namespace 'ns_name' 3.修改namespace属性 alter_namesp ...

  7. clickhouse--表引擎

    表引擎 表引擎(即表的类型)决定了: 1)数据的存储方式和位置,写到哪里以及从哪里读取数据 2)支持哪些查询以及如何支持. 3)并发数据访问. 4)索引的使用(如果存在). 5)是否可以执行多线程请求 ...

  8. 读论文-基于Python的协同过滤算法的研究与应用实现

    前言 今天读的论文为一篇名为<基于Python的协同过滤算法的研究与应用实现>的论文,文章是在2019年9月发表于<电脑知识与技术>的一篇期刊论文. 摘要 随着科学技术的快速发 ...

  9. camunda工作流实战项目【PRO版】(表单设计器+流程编辑器,零代码创建流程)

    pro版本主要对流程设计器.表单模块做了优化和改造,下面是各版本功能对比 一.整体情况介绍 基于ruoyi平台和camunda工作流开发而成,结合bpmn.js流程编辑器和vform表单设计器,实现常 ...

  10. 关于does not have a method xx to handle event "tap"我有话要说

    前言> 我正在对接微信小程序订阅消息功能,看了官方文档觉得挺简单的.于是踩坑开始了 ###### 应该是这样简单的```wx.requestSubscribeMessage({ tmplIds: ...