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. Web - 前端 Vue.js （1）

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...

  2. ubuntu16.04环境下在docker上部署javaweb项目简单案例

    因为一些原因,接触到了docker,经过一番研究,总算是有了一些自己的看法,有什么不对的地方,希望多多指教. 废话不多说,首先我这里使用的虚拟机安装的是ubuntu16.04版本,其他版本应该也可以. ...

  3. ubuntu安装之后需要做什么

    安装完ubuntu或者linux后应该做什么?首先在你安装完之后,都知道,很多系统都是有自带的一些软件之类,很多其实是不必要的,我们可以完全删掉,需要的时候再重装,那么安装完之后应该做什么呢? 1.智 ...

  4. css 层叠 比较特殊性

    css 层叠: 多个相同的css声明(属性),应用到同一个元素上.当一个标签声明冲突时,浏览器会自动出发层叠机制 1:比较优先级 2:比较特殊性 3:比较源次序 依次经过上面的1,2,3的比较后,最终 ...

  5. bom浏览器对象模型（基础）

    页面中有一个顶级对象: document -> 操作页面元素   浏览器中也有个顶级对象: window -> 页面中所有的东西都是属于window的   变量属于window var n ...

  6. SQL注入是什么？如何防止？

    SQL注入是什么?如何防止? SQL注入是一种注入攻击,可以执行恶意SQL语句.下面本篇文章就来带大家了解一下SQL注入,简单介绍一下防止SQL注入攻击的方法,希望对大家有所帮助. 什么是SQL注入? ...

  7. MongoDB简介，安装，增删改查

    MongoDB到底是什么鬼? 最近有太多的同学向我提起MongoDB,想要学习MongoDB,还不知道MongoDB到底是什么鬼,或者说,知道是数据库,知道是文件型数据库,但是不知道怎么来用 那么好, ...

  8. 【转载】抓包工具tcpdump用法说明

    转载地址:http://www.cnblogs.com/f-ck-need-u/p/7064286.html tcpdump采用命令行方式对接口的数据包进行筛选抓取,其丰富特性表现在灵活的表达式上. ...

  9. Jenkins配置文件

    https://github.com/zeyangli/Jenkins-docs 在Linux上的Jenkins 以rpm方式部署的配置文件在/etc/sysconfig/jenkins,可以定义Je ...

  10. 用js刷剑指offer(栈的压入、弹出序列)

    题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压 ...