Vue Router的params和query传参的使用和区别
vue页面跳转有两种方式分别是:name和path
this.$router.push({name: 'HelloWorld2})
this.$router.push({path: '/hello-world1'})
传参也有两种方式分别是:params和query
this.$router.push({name: 'HelloWorld2', params:{id:1}})
this.$router.push({path: '/hello-world2', query:{id:2}})
下面放张图来展示路径和参数之间的关系
结论:
使用name跳转可以用params和query传参
当name和query对应的时候也可以跳转并传参,但是路由后面不能加参数名,否则页面会变空白
使用path跳转只能用query传参
如果使用path对应params则数据传输不过去
使用query传参地址栏用?拼接起来的,类似于Ajax中的get请求
{
path: '/hello-world',
name: 'HelloWorld2',
component: HelloWorld2
}
这是使用query传参的地址栏显示:hello-world?id=2
使用params传参的时候要在路由后面加参数名,(如果不加参数名也可以传递参数,但是页面一刷新参数就丢失了),并且传参的时候,参数名要跟路由后面设置的参数名对应。使用query方法,就没有这种限制,直接在跳转里面用就可以
{
path: '/hello-world/:id',
name: 'HelloWorld2',
component: HelloWorld2
}
这是使用params传参的地址栏显示:hello-world/2
讲了传参怎么接受参数呢?
params和query接受参数很类似
this.$route.params.id,
this.$route.query.id,
这里注意使用的是route不是router!
再来补充下使用
<router-link>对应path和name怎么传参
先来看index.js的写法
{
path: '/my-order/:state',
name: 'my-order',
component: MyOrder,
}
path传参:
<router-link:to="{path: '/select-address/0'}"></router-link>
看见了吧,直接在跳转的时候在地址栏拼接上对应的参数即可,
name传参:
<router-link :to="{name: 'my-order', params: {state: 0}"></router-link>
使用name传参的时候就不能在地址栏进行拼接操作,需要写出对应的参数名
接受参数跟上面的都一样
Vue Router的params和query传参的使用和区别的更多相关文章
- vue params和query传参区别
参考地址:https://blog.csdn.net/bluefish_flying/article/details/81011230 router.js中 路由设置这里, 当你使用params方法传 ...
- params 和 query 传参的区别
很多人都知道params 和 query 都可以在页面跳转的时候传递参数. query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数 ...
- (转)vue router 如何使用params query传参,以及有什么区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...
- vue router 如何使用params query传参,以及有什么区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...
- vue路由传值params和query的区别
vue路由传值params和query的区别1.query传参和接收参数传参: this.$router.push({ path:'/xxx' query:{ id:id } })接收参数: this ...
- Vue 踩坑日志 - 有关路由传参的坑
1.有关路由传参 vue中当通过params传过去的参数刷新页面以后会消失,所以可以用query传参.但此时又会出现另一个坑,刷新后数据仍在.但这是针对单个的某个变量的. 如果传入一个对象的话,刷新页 ...
- Vue路由query传参
1.不要进行过深的嵌套 let id = 'uyu' this.$router.push({ path: '/mrp_detail', query: { re_order_id: id, option ...
- vue路由对不同界面进行传参及跳转的总结
最近在做一个公众号的商城项目,主要用的VUE+MUI,其实今天这个点对于有过项目经验的前端工作者来说是最基础的,但也是必须要掌握的,今天小编主要是记录下传参和跳转的一些总结(仅供参考). 首先我们先上 ...
- vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期
目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...
随机推荐
- Codeforces Round #530 (Div. 2) (前三题题解)
总评 今天是个上分的好日子,可惜12:30修仙场并没有打... A. Snowball(小模拟) 我上来还以为直接能O(1)算出来没想到还能小于等于0的时候变成0,那么只能小模拟了.从最高的地方进行高 ...
- mysql运维常用
一.用户授权 用户授权主要指: 1.可以限制用户访问那些库.表 2.可以限制用户对库.表执行select.create.delete.alter.drop等操作 3.可以限制用户登陆的IP.IP段.或 ...
- 安装charles
简介: Charles主要的功能包括: 支持SSL代理.可以截取分析SSL的请求. 支持流量控制.可以模拟慢速网络以及等待时间(latency)较长的请求. 支持AJAX调试.可以自动将json或xm ...
- Codeforces Educational Codeforces Round 17 Problem.A kth-divisor (暴力+stl)
You are given two integers n and k. Find k-th smallest divisor of n, or report that it doesn't exist ...
- 恶补数论(二) Baby-Step-Giant-Step 大步小步求离散模对数
知识概述 好吧,我承认这是我初三寒假就听过的知识,然而我现在早就高一了(又是寒假,只不过我已经在省选了...) 额,这是求离散模对数的一种算法 也就是求满足方程a^x≡b(mod p)的最小的x(其中 ...
- Unity常用常找(二)
本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/51315050 作者:car ...
- Microsoft 根证书计划弃用 SHA-1 哈希算法
Microsoft 根证书计划弃用 SHA-1 哈希算法 微软官方2016年1月12日发布安全通报,自2016年1月1日起Microsoft 已经发布代码弃用变更,也就是说2016年1月1号后用SHA ...
- hdu 2014 位运算
/* 注意两点 1.从后往前找互补的,刚开始我找的是相邻的但是这个例子就不行101 110 2.因为时累加所以sum可能会超出int范围,这个很重要. */ #include<stdio.h&g ...
- Neo4j ETL工具快速上手:简化从关系数据库到图数据库的数据迁移
注:本文系从https://medium.com/neo4j/tap-into-hidden-connections-translating-your-relational-data-to-graph ...
- hdu3450
分析:首先要知道有递推公式dp[i] = Sigma(dp[j]),dp[i]表示第i个数结尾的完美子序列的个数,|a[i] - a[j]| <= d,j<i.直接这样做的时间复杂度为n^ ...