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. unittest 运行slenium（五）---运行代码并生成HTMLTestRunner报告

    整体代码如下: import os import sys import time import datetime import unittest import HTMLTestRunner # git ...

  2. LVS工作原理及集群类型

    Cluster概念 Cluster:集群,为解决某个特定问题将多台计算机组合起来形成的单个系统 Linux Cluster类型: LB:Load Balancing,负载均衡 HA:High ...

  3. 剖析gcc -v输出

    分析gcc -v的详细信息的意义 首先我们需要清楚一点,我们并不能完全弄清楚gcc -v的所有信息,因为毕竟我们并不是GCC编译器集合的实现者,对于这些信息,他们才是最清楚的.由于我们不能将所有的信息 ...

  4. 如何使用Feign构造多参数的请求

    原文:http://www.itmuch.com/spring-cloud-sum/feign-multiple-params/ 本节来探讨如何使用Feign构造多参数的请求.笔者以GET及POST请 ...

  5. js依赖mui.css生成图片验证码

    js依赖mui.css生成图片验证码 相关css和js引入路径 https://cdnjs.cloudflare.com/ajax/libs/mui/3.7.1/css/mui.css https:/ ...

  6. Eclipse安装scala插件

    1.下载插件 http://scala-ide.org/download/current.html ​ 2.将下载的压缩包解压,拷贝到eclipse\dropins目录下 3.启动eclipse,安装 ...

  7. cookie、session与用户认证组件

    1.cookie def login(request): if request.method == "GET": return render(request,"login ...

  8. java中的深拷贝与浅拷贝

    Java中对象的创建 clone顾名思义就是复制, 在Java语言中, clone方法被对象调用,所以会复制对象.所谓的复制对象,首先要分配一个和源对象同样大小的空间,在这个空间中创建一个新的对象.那 ...

  9. C#当前运行所在目录集合

    //获取当前进程的完整路径,包含文件名(进程名).string str = this.GetType().Assembly.Location;result: X:\xxx\xxx\xxx.exe (. ...

  10. ZOJ-3774 Power of Fibonacci——等比数列求和&&等价替换

    题目 求 $\displaystyle \sum_{i=1}^n F_i^k$,($1 \leq n\leq 10^{18},1 \leq  k\leq 10^5$),答案对 $10^9+9$ 取模. ...