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传参的使用和区别的更多相关文章

  1. vue params和query传参区别

    参考地址:https://blog.csdn.net/bluefish_flying/article/details/81011230 router.js中 路由设置这里, 当你使用params方法传 ...

  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. vue路由传值params和query的区别

    vue路由传值params和query的区别1.query传参和接收参数传参: this.$router.push({ path:'/xxx' query:{ id:id } })接收参数: this ...

  6. Vue 踩坑日志 - 有关路由传参的坑

    1.有关路由传参 vue中当通过params传过去的参数刷新页面以后会消失,所以可以用query传参.但此时又会出现另一个坑,刷新后数据仍在.但这是针对单个的某个变量的. 如果传入一个对象的话,刷新页 ...

  7. Vue路由query传参

    1.不要进行过深的嵌套 let id = 'uyu' this.$router.push({ path: '/mrp_detail', query: { re_order_id: id, option ...

  8. vue路由对不同界面进行传参及跳转的总结

    最近在做一个公众号的商城项目,主要用的VUE+MUI,其实今天这个点对于有过项目经验的前端工作者来说是最基础的,但也是必须要掌握的,今天小编主要是记录下传参和跳转的一些总结(仅供参考). 首先我们先上 ...

  9. vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期

    目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...

随机推荐

  1. layui 动态表格之合并单元格

    需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格 done : function(res, curr, count) ...

  2. PAT 1143 Lowest Common Ancestor

    The lowest common ancestor (LCA) of two nodes U and V in a tree is the deepest node that has both U ...

  3. [bzoj1005][HNOI2008][明明的烦恼] (高精度+prufer定理)

    Description 自从明明学了树的结构,就对奇怪的树产生了兴趣......给出标号为1到N的点,以及某些点最终的度数,允许在任意两点间连线,可产生多少棵度数满足要求的树? Input 第一行为N ...

  4. BZOJ 4006 Luogu P3264 [JLOI2015]管道连接 (斯坦纳树、状压DP)

    题目链接: (bzoj)https://www.lydsy.com/JudgeOnline/problem.php?id=4006 (luogu)https://www.luogu.org/probl ...

  5. AOP基础

    [Why AOP ?] 1.代码混乱:越来越多的非业务需求(日志和验证等)加入后,原有的业务方法急剧膨胀.每个方法在处理核心逻辑的同时还必须兼顾其他多个关注点. 2.代码分散:以日志需求为例,知识为了 ...

  6. 【Codeforces 1063B】Labyrinth

    [链接] 我是链接,点我呀:) [题意] 你可以往左最多x次,往右最多y次 问你从x,y出发最多能到达多少个格子 只能往上下左右四个方向走到没有障碍的格子 [题解] 假设我们从(r,c)出发想要到固定 ...

  7. [luoguP2890] [USACO07OPEN]便宜的回文Cheapest Palindrome(DP)

    传送门 f[i][j] 表示区间 i 到 j 变为回文串所需最小费用 1.s[i] == s[j] f[i][j] = f[i + 1][j - 1] 2.s[i] != s[j] f[i][j] = ...

  8. 转载 - Struts2基于XML配置方式实现对action的所有方法进行输入校验

    出处:http://www.cnblogs.com/Laupaul/archive/2012/03/15/2398360.html http://www.blogjava.net/focusJ/arc ...

  9. 转载 - C++ - placement new

    出处:http://www.cnblogs.com/wanghetao/archive/2011/11/21/2257403.html 有关placement new                  ...

  10. 所有在Linux系统下 arp -d $ip 命令只能清除一个IP地址的对应MAC地址缓存,可以使用组合命令操作。

    https://blog.csdn.net/u011641885/article/details/48175239 https://blog.csdn.net/zj0910/article/detai ...