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. MySQL5.7x 主从复制

    原文链接:https://blog.liuzijian.com/post/9f8ede8e-26de-75d6-6347.html 在MySQL中,主从复制(Master-Slave Replicat ...

  2. API 设计之禅

    API 设计之禅 译者按:本文翻译自 How to design a good API and why it matters.根据笔者经历,很多大厂程序员所写的代码和大厂内部封装的各种中间件.类库,毫 ...

  3. 攻城攻心的混淆大师——深入解析第十八届CISCN x 第二届长城杯初赛Reverse赛题vt

    前言 在初赛结束近两月之际,笔者在复盘过程中意外发现了这道当时无人能解的难题.经过两日深入的探索与钻研,笔者终于成功地对这道赛题进行了全面的解构.在品味破译flag所带来的喜悦之余,笔者亦深感此题蕴含 ...

  4. vscode launch program "xxx" does not exist

    Error Solution Please Click The Build Button Other This maybe is the one of Makefile Tools or 'c++ e ...

  5. Qt Json序列化与反序列化

    Qt Json序列化与反序列化 Qt的一个用于序列化与反序列化的库 xpack,也可用于c++. 使用方法 下载库文件 xpack 标签 - Gitee.com 按照它的默认样子放好,建议单独放一个文 ...

  6. 给Typecho加上心知天气-网页天气插件

    给你的博客添加个知心天气的天气预报,代码看下面 <!-- 知心天气--> <div id="tp-weather-widget" class="navb ...

  7. Github Copilot的使用方法和快捷键

    GitHub Copilot是一款由GitHub和OpenAI共同开发的代码智能补全工具,它使用机器学习模型来为你提供代码建议和自动完成,可以加快开发过程并提高代码质量.下面是使用GitHub Cop ...

  8. HDP集群部署

    一.环境准备 centos7 安装和系统环境处理 1)运行初始化脚本 !/bin/bash ------------------------------------- 系统环境初始化脚本 本脚本仅支持 ...

  9. 在鹅厂做java开发是什么体验

    离职已有好几个月,准备写一篇关于之前在腾讯做Java开发的经历,现在来谈谈在Java领域里,在腾讯做Java开发的体验.随便写写别较真. 首先,介绍一下腾讯里与Java相关的部门.主要有CDG(云与智 ...

  10. nuxt.js 使用 Typescript 在 VSCode 报错: File 'xxx/components/Logo.vue' is not a module. Vetur(2306)

    nuxt.js 生成的默认文件 components/Logo.vue 源码大概如下: 1 <template> 2 <svg 3 class="NuxtLogo" ...