参考地址:https://blog.csdn.net/bluefish_flying/article/details/81011230

router.js中

路由设置这里,

当你使用params方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。(params一旦设置在路由,params就是路由的一部分,如果这个路由有params传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页面会没有内容。)

使用query方法,就没有这种限制,直接在跳转里面用就可以。

所以,解决标题中问题的办法两种:

1,用query传参

2.用params传参,并在router.js路由里添加型如/router1/:id的设置

vue params和query传参区别的更多相关文章

  1. Vue Router的params和query传参的使用和区别

    vue页面跳转有两种方式分别是:name和path this.$router.push({name: 'HelloWorld2}) this.$router.push({path: '/hello-w ...

  2. params 和 query 传参的区别

    很多人都知道params 和  query  都可以在页面跳转的时候传递参数. query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数 ...

  3. (转)vue router 如何使用params query传参,以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  4. vue router 如何使用params query传参,以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  5. react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

  6. Vue配置路由和传参方式及路由守卫!

    安装路由 npm i vue-router -S 引入路由 import VueRouter form VueRouter 注入路由模块 Vue.use(VueRouter) 定义路由匹配规则 let ...

  7. vue:解决使用param传参后,再次刷新页面会新增一个原有的tab

    问题:在最近的项目中,我通过传递不同的参数,复用同一组件进行渲染,然而意外出现一个bug,就是当我重新刷新该页面时,会新增一个tab 原来的: 刷新页面后: 查阅资料后,发现该现象是由于通过param ...

  8. vue父子组件路由传参的方式

    一.get方式(url传参): 1.动态路由传参: 父组件: selectItem (item) { this.$router.push({ path: `/recommend/${item.id}` ...

  9. 前台VUE的组件之间传参方式

    路由传参 """ 转跳: <router-link :to="'/course/'+course.id">{{course.name}}& ...

随机推荐

  1. JAVA版开源微信管家—JeeWx捷微3.1小程序版本发布,支持微信公众号,微信企业号,支付窗

    支持小程序,JeeWx捷微3.1小程序版本发布^_^ JeeWx捷微V3.1--多触点小程序版本管理平台(支持微信公众号,微信企业号,支付窗) JeeWx捷微V3.1.0版本紧跟微信小程序更新,在原有 ...

  2. APP-8.1-百度语音应用

    1.百度语音登录地址 http://yuyin.baidu.com/ 2.控制台创建应用 3.生成签名 3.1Postman软件应用 APP-8.2-Postman应用 3.2Postman执行 UR ...

  3. 推荐一款idea 翻译插件 ECTranslation

    无意中看到一款idea翻译插件, ECTranslation,才知道有这么个东西,推荐给看到的人吧,使用简单,值得拥有. 参考:http://p.codekk.com/detail/Android/S ...

  4. Object-c @property与@synthesize的配对使用。

    功能:让编译器自动编写一个与数据成员同名的方法声明来省去读写方法的声明. 如: 1.在头文件中: @property int count; 等效于在头文件中声明2个方法: - (int)count; ...

  5. Django添加ckeditor富文本编辑器

    源码 https://github.com/django-ckeditor/django-ckeditor 通过pip安装. pip3 install django-ckeditor pip3 ins ...

  6. 浅谈MySQL事务及隔离级别

    目录 1.什么是事务 2.事务的ACID属性 2-1.原子性(Atomicity) 2-2.一致性(Consistency) 2-3.隔离性(Isolation) 2-4.持久性(Durability ...

  7. 2018软件工程W班助教小结博客

    一.总体回顾 我是汪老师实验室的研二的一名研究生,在研一的课程中就上过老师带的高级软件工程(采取的模式是一样的,亲身经历了一学期所以对整体流程比较清楚).实验室的学生当老师实践课的助教是这几年流传下来 ...

  8. PL/SQL 日期时间类型函数及运算

    内部存储格式: 世纪.年.月.日.小时.分钟.秒 默认格式是:DD-MON-RR. SYSDATE 返回当前的系统时间. SELECT SYSDATE FROM DUAL: 对日期的数学运算 SELE ...

  9. [cocos2d-x]认识游戏开发(图)

    FreeMind的.mm文件下载: http://yunpan.cn/cfL3cm6CZkMSt (提取码:e01a)

  10. CSS3性能体验

    如今许多新技术名词在不断的被提及中,已然向我们靠近.某篮球运动员说了:“变向过人”不是超级明星的专利,也许我也可以试着去做,现在看起来效果还不错...那么,现在我们来体验CSS3:CSS3中的动画功能 ...