参考地址: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. c++Builder debug DataSet Visualizer

    c++Builder debug DataSet Visualizer delphi 正常,c++builder报错. fdMemTable->SaveToFile("d:\\DSdb ...

  2. linux系统基础入门

    使用工具:源码管理,自动部署,web服务器(linux) linux系统基础入门 1.下载地址 2.本文介绍的是一个基于Ubuntu的开源操作系统 下载优麒麟 Ubuntu是一个广泛应用于个人电脑,云 ...

  3. javascript:控制一个元素高度始终等于浏览器高度

    window.onresize = function(){ this.opHtight()} //给浏览器添加窗口大小改变事件window.onresize = function(){ this.op ...

  4. Spark 调优(转)

    Spark 调优 返回原文英文原文:Tuning Spark Because of the in-memory nature of most Spark computations, Spark pro ...

  5. git 合并多个commit

    1,查看提交历史,git log 首先你要知道自己想合并的是哪几个提交,可以使用git log命令来查看提交历史,假如最近4条历史如下: commit 3ca6ec340edc66df13423f36 ...

  6. 一个有趣的nginx问题引发的小问题

    最近处理一个nginx问题,故障现象是:所有的work进程,都在等锁.调用的是sem_wait 根据对应的堆栈,查看一下大家等的锁都一样,看看这把锁被谁拿了: 锁的结构是: typedef struc ...

  7. matt cutts : try something new for 30 days

    30 天尝试新事物matt cutts : try something new for 30 days[小计划帮你实现大目标] 是否有些事情, 你一直想去做, 但就是没有实现?马特 ?卡茨建议: 尝试 ...

  8. Python基本模块介绍:sys、platform

    sys模块 常用函数 sys.argv 命令行参数,实现从程序外部向程序传递参数. sys.path 模块搜索路径. sys.platform 获取当前系统平台. sys.version 获取pyth ...

  9. [福大2018高级软工教学]团队Beta阶段成绩汇总

    一.作业地址: https://edu.cnblogs.com/campus/fzu/AdvancedSoftwareEngineerning2018/homework/2465 二.Beta阶段作业 ...

  10. jquery 初始化数据 添加html 第一次玩0.0

    /** * Created by Eee_xiang on 2018/04/12. * 联动响应事件 */ (function () { $.linkEvent = function (options ...