vue-router中query与params区别
query和params两者都是在Vue路由中传参。
用法: query用path来引入,params只能用name来传递,不能使用path
展示效果:query更像ajax中get请求(会在地址栏显示参数),而params更像post方式传递(不会在地址栏显示参数)
query方式传参和接收参数
//传参
this.$router.push({
path:'/xxx'
query:{
id:id
}
})
//接收参数
this.$route.query.id
传参是this.$router,接收参数是this.$route
$router为VueRouter实例。想要导航跳不同URL可以使用$this.router的方法(push、go、replace)去切换路由
$route是当前router跳转对象。里面可以获取name、path、query、params等相关信息
params方式传参和接收参数
//传参:
this.$router.push({
name:'xxx'
params:{
id:id
}
}) //接收参数:
this.$route.params.id
params传参里面只能是name,不能是path
params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined
vue-router中query与params区别的更多相关文章
- vue router使用query和params传参的使用
传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,希望可以帮到大家. Vue ...
- Vue router中携带参数与获取参数
Vue router中携带参数与获取参数 携带参数 query方式,就是?+&结构,例如/login?id=1 <router-link :to="{ name:'login' ...
- vue-router中query和params传参(接收参数)以及$router、$route的区别
query传参: this.$router.push({ path:'/...' query:{ id:id } }) 接收参数:this.$route.query.id params传值: 传参: ...
- Vue router的query对象里的值的问题
在使用 $router.push() 时,如果使用了query,则可以在跳转后从query中获取到对应的参数.如果传的是字符串自然没问题,但是如果传的其他类型的数据,在跳转之后是正常的,而跳转之后再刷 ...
- vue router 中,children 中 path 为空字符串的路由,是默认打开的路由(包括在 el-tabs 中嵌套路由的情况)
详见该页面的最后一个代码块:https://router.vuejs.org/zh/guide/essentials/nested-routes.html#%E5%B5%8C%E5%A5%97%E8% ...
- (转)vue router 如何使用params query传参,以及有什么区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...
- vue router 如何使用params query传参,以及有什么区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- Vue Router学习笔记
前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...
随机推荐
- Android 简单调用摄像头
IDE: android studio3.1.2 界面: activity_main2.xml
- BZOJ 2069: [POI2004]ZAW(Dijkstra + 二进制拆分)
题意 给定一个有 \(N\) 个点 \(M\) 条边的无向图, 每条无向边 最多只能经过一次 . 对于边 \((u, v)\) , 从 \(u\) 到 \(v\) 的代价为 \(a\) , 从 \(v ...
- 【agc013d】Piling Up(动态规划)
[agc013d]Piling Up(动态规划) 题面 atcoder 洛谷 有\(n\)个球,颜色为黑白中的一种,初始时颜色任意. 进行\(m\)次操作,每次操作都是先拿出一个求,再放进黑白各一个, ...
- [luogu4139]上帝与集合的正确用法【欧拉定理+扩展欧拉定理】
题目大意 让你求\(2^{2^{2^{\cdots}}}(mod)P\)的值. 前置知识 知识1:无限次幂怎么解决 让我们先来看一道全国数学竞赛的一道水题: 让你求解:\(x^{x^{x^{\cdot ...
- centos7安装部署本地局域网yum源
应用场景: 当Linux系统都是最小化安装的系统,又无法做到每台都能访问外网的情况下,安装常用工具或者依赖包的最好办法可能就是建立本地yum源了. 安装环境: 一台 centos 7.4 minima ...
- php 限制类的对象类型
事实上,采用哪种处理参数类型的策略,取决于任何潜在bug的严重程度.通常PHP会根据语境自动转换大多数基本数据类型. 因此,你需要在检测类型.转换类型和依赖良好清晰的文档(无论决定用哪一种,都应该提供 ...
- NowCoder--牛可乐发红包脱单ACM赛C_区区区间间间
题目链接:C_区区区间间间 思路:算贡献,求出每个数为当前最大值时所在的区间个数,和每个数为最小值的区间个数 和这个题有点类似 搭配食用效果更佳 点击这里 #include<bits/stdc+ ...
- bzoj3900 交换茸角
题目链接 思路 看到n比较小,可以状压. 可以先考虑什么情况下会无法平衡.显然就是排完序之后两两相邻的不能满足小于等于c的限制. 状态.用f[i]来表示i集合中的鹿完成交换所需要的次数. 预处理.无法 ...
- Apache Ant 项目构建
项目构建:通过构建工具对多个项目进行统一批量的编译和运行,比如,对多个Jmeter脚本批量运行 1.Ant是什么? Ant是 构建工具,Apache Ant是一个将软件编译.测试.部署等步骤联系在一起 ...
- ggplot2画histogram(坐标轴刻度值字体大小,坐标轴标题字体大小,柱形宽度,大标题字体大小、居中)
见链接:https://www.r-bloggers.com/how-to-make-a-histogram-with-ggplot2/ 写的很完整. 此外,关于一些参数的用法: theme(plot ...