API在这里  https://router.vuejs.org/guide/essentials/navigation.html

第一种传参

通过路由属性中的name来确定匹配的路由，通过params来传递参数。

如果你用params这种方式来传的话,就不要用path了

获取参数

用 this.$router.params.参数名来获取参数

这种在地址栏上是不会显示参数的

第二种

用path和query来传

获取参数

url上面是带参数的

第三种

直接在路由中的path里面去设置

假如要传两个参数 ,先去router/index.js里面去设置,这是跳转后的页面设置

下面是要带过去的参数值

获取参数

这里的id和name就是在path里面配置的参数名.

vue 路由传参的三种方法的更多相关文章

  1. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  2. vue路由传参的三种方式区别（params,query）

    最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...

  3. vue 路由传参的三种基本模式

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...

  4. vue路由传参的三种方式

    方式一 通过query方式传参 这种情况下 query传递的参数会显示在url后面 this.$router.push({ path: '/detail', query: { id: id } }) ...

  5. vue路由传参的三种基本方式

    现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click= ...

  6. Vue路由传参的几种方式

    原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613   前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...

  7. vue路由传参的几种基本方式

    原文地址 this.$router.push跳转 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据.父组件中: <li v-for="article i ...

  8. Vue-router路由传参的三种方式

    本文简单介绍下三种路由传参: (1)在路由中配置 { path : ‘/home/:id’, name : ‘Dome’, component } 然后写调用的时候 this.$router.push ...

  9. vue里面路由传参的三种方式

    1.方式一 通过query的方式也就是?的方式路径会显示传递的参数 HTML的方式<router-link :to="{name:xxx,query:{page:1,code:8899 ...

随机推荐

  1. Vue 单元测试 使用mocha+jest

    目录 Vue 单元测试 mocha+jest jest 实例 mocha expect方法断言 示例代码 Vue 单元测试 官网:https://vue-test-utils.vuejs.org/zh ...

  2. 通过DB13备份SystemDB

    配置systemdb capital user name:SYSTEM save -back Save 现在可以通过DB13备份SystemDB Done. Congratulations!

  3. java中级面试题

    1.Java中堆和栈有什么不同? 每个线程都有自己的栈内存,用于存储本地变量,方法参数和栈调用,一个线程中存储的变量对其它线程是不可见的.而堆是所有线程共享的一片公用内存区域.对象都在堆里创建,为了提 ...

  4. rabbitmq笔记（一）rabbitmq简介及基础

    一.消息组件 如果从消息组件来讲主要划分位两类: 1.JMS组件:ActiveMQ(慢): 2.AMQP组件(协议):性能是最高的, 而AMQP有两个主要的开源: 1)RabbitMQ:使用最广泛,速 ...

  5. FDD-LTE上下行带宽一样的,为什么上下行流量差别这么大

    转:https://zhidao.baidu.com/question/923940070377297579.html 虽然FD系统,上下行使用的带宽一样,但是上下行的信号编码效率完全不同.上行信号( ...

  6. FPGA学习笔记之按键控制

    参考: [黑金原创教程][FPGA那些事儿-驱动篇I ]实验二:按键模块① - 消抖 源码如下: key_funcmod.v module key_funcmod(clk, rst, key, led ...

  7. Pyspark：AssertionError: dataType should be DataType

    1. schema参数,AssertionError: dataType should be DataType # AssertionError: dataType should be DataTyp ...

  8. webpack多页面打包配置

    单页面应用:整个应用里面只有一个html文件.现在主流的框架,vue,react都是单页面应用. 所以webpack绝大部分都是对单页面打包.那么webpack如何对多页面进行打包 index.htm ...

  9. python练习题（二）

    题目: 已知以下几期双色球号码(最后一个数字为蓝球), 2019080 03 06 08 20 24 32 07 2019079 01 03 06 09 19 31 16 2019078 01 17 ...

  10. SQL SERVER 语句转换格式函数Cast、Convert

    CAST.CONVERT都可以执行数据类型转换.在大部分情况下,两者执行同样的功能,不同的是CONVERT还提供一些特别的日期格式转换,而CAST没有这个功能. CAST是ANSI兼容的,推荐使用CO ...