这个是路由: 

{
    path:'/city/:city',
    name:'City',
    component:City
  }
 
下面使用query和params分别传参
query:
  <router-link :to="{name:'City',query:{city:cityName}}"  >
  能使用可是,浏览器发出警告[vue-router] missing param for named route "City": Expected "city" to be defined
    意思;[Vue router]缺少命名路由“city”的参数:应定义“city”
  原因:query访问最好使用 路径访问 即 <router-link  :to="{path:'/city/:city',query:{city:cityName}}"  >
  接受数据:
    this.$route.query.city
  浏览器路径表现:/city/:city?city=广州
params:
  <router-link  :to="{path:'/city/:city',params:{city:cityName}}"  >
   此时,浏览器没有报错或警告,可是参数却没有传过来  浏览器表现 /city/:city
  所以要使用name代替路径 <router-link :to="{name:'City',query:{city:cityName}}"  >
  接受数据:
    this.$route.params.city
  浏览器路径表现:/city/广州
总结:query 使用路径引入路由  params 使用name来引入路由
 
 
 
 
  

query 与 params 使用的更多相关文章

  1. nodejs Express 4.x req.body req.query req.params 三种获取参数的方法

    第一种情况:http://localhost:3000/1,我们可以用req.params.(应该是跟路由有关,待) 第二种情况:http://localhost:3000/?id=1,用req.qu ...

  2. vue-router中query与params区别

    query和params两者都是在Vue路由中传参. 用法: query用path来引入,params只能用name来传递,不能使用path 展示效果:query更像ajax中get请求(会在地址栏显 ...

  3. vue-router中query和params传参(接收参数)以及$router、$route的区别

    query传参: this.$router.push({ path:'/...' query:{ id:id } }) 接收参数:this.$route.query.id params传值: 传参: ...

  4. vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同

    import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...

  5. 使用路由传参时,query与params的区别!

    query 1:参数会在地址栏显示 2:参数不需要在路由的path后接:args1/:args2 3:获取参数用this.$route.query.args1 params 1:参数需要在路由的pat ...

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

    链接:https://segmentfault.com/a/1190000012735168 1.query方式传参和接收参数 传参: this.$router.push({ path:'/xxx' ...

  7. jdbctemplate中的query(sql,params,mapper)与queryForList(sql,params,class)区别

    query(sql,params,mapper):是针对自定义对象类型的查询语句,比如: jdbcTrade.query(sql, params, new AMapper()); queryForLi ...

  8. nodeJS学习(11)--- nodeJS 取参 -- req.body & req.query & req.params

    参考:https://my.oschina.net/u/2519530/blog/535309 获取请求中的参数是每个web后台处理的必经之路,nodejs的 express框架 提供了四种方法来实现 ...

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

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

  10. vue路由传参query和params的区别(详解!)

    1.query使用path和name传参都可以,而params只能使用name传参. query传参: 页面: this.$router.push({ path:'/city',name:'City' ...

随机推荐

  1. [Spring cloud 一步步实现广告系统] 2. 配置&Eureka服务

    父项目管理 首先,我们在创建投放系统之前,先看一下我们的工程结构: mscx-ad-sponsor就是我们的广告投放系统.如上结构,我们需要首先创建一个Parent Project mscx-ad 来 ...

  2. 打包Electron项目

    先确保该项目正常运行npm run dev,结束程序, 上篇的项目运行已经提到了打包输出工具electron-packager 可以使用全局安装的方式: npm install -g electron ...

  3. 线程学习oneday

    进程:执行中的程序叫做进程(Process),是一个动态的概念. 线程:一个进程可以产生多个线程.同多个进程可以共享操作系统的某些资源一样,同一进程的多个线程也可以共享此进程的某些资源(比如:代码.数 ...

  4. 牛客网2016.4.11(两个数相加为sum/计数一个int型的二进制有多少个1/二叉树是否左右对称)

    求最小的两个数相加为sum //求最小的两个数相加为sum public ArrayList<Integer> FindNumbersWithSum(int [] array,int su ...

  5. PythonI/O进阶学习笔记_1.抽象、面向对象、class/object/type

    前言: 是自己在学习python进阶IO学习视频的时候的理解和笔记,因为很多都是本菜鸟学习时候的自己的理解,有可能理解有误. Content: - 抽象的概念和面向对象的概念?想要大概了解python ...

  6. Python处理NetCDF格式数据为TIFF数据(附脚本代码)

    博客小序:NetCDF格式数据广泛应用于科学数据的存储,最近几日自己利用python处理了一些NetCDF数据,特撰此博文以记之. 参考博客: https://www.cnblogs.com/shou ...

  7. IDEA maven使用tomcat7插件启动报错:A child container failed during start

    使用maven的tomcat7插件启动项目时出现上面的错误:A child container failed during start, 出现这个问题的原因是导入了servlet-api包,与tomc ...

  8. 在.net core web 项目中操作MySql数据库(非ORM框架,原生sql语句方式)

    本案例通过MySql.Data和Dapper包执行原生sql,实现对数据库的操作. 操作步骤: 第1步:在MySql数据库中新建表User(使用Navicat For MySql工具) 建表语句: c ...

  9. SPOJ - Find The Determinant III 计算矩阵的行列式答案 + 辗转相除法思想

    SPOJ -Find The Determinant III 参考:https://blog.csdn.net/zhoufenqin/article/details/7779707 参考中还有几个关于 ...

  10. CodeForces 982 D Shark

    Shark 题意:一个研究员观察了一条鲨鱼n天的运动,然后这条鲨鱼他只会往前走,不会回到去过的地方,现在有一个k,,如果鲨鱼当天游过的距离 >= k, 代表的鲨鱼在这天会前往下一个地点,现在求鲨 ...