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. 转 实现类似QQ的窗体停靠

    [DllImport("User32.dll")] public static extern bool PtInRect(ref Rectangle Rects, Point lp ...

  2. Python、PyCharm、Django框架安装

    一.下载Python环境 1.1 下载Python环境,以下网址: https://www.python.org/downloads/release/python-373/ 下载安装包: 1.2点击安 ...

  3. MySQL LAST_INSERT_ID()用法

    last_insert_id()函数是适用于id为自动生成的表 下面是插入表数据时last_insert_id()函数的两种用法: 表结构: 此表使用last_insert_id()函数的字段为par ...

  4. R_数据操作_高级_04

    数学函数: abs(x) 绝对值     sqrt(x) 平方根   ceiling(x) 放回不小于x的最小整数 floor(x) 不小于x的最大整数   trunc(x) 先0方向截取x的整数部分 ...

  5. webpack资源加载常用配置

    const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundl ...

  6. 前端之：传统的DOM是如何渲染的?

    a.纯后端渲染:页面发送请求,后端服务器中将数据拼成完整DOM树,并转换成一个字节流作为HTTP Response的body返回给浏览器.优点在于 返回的HTTP Response是包含着全部页面内容 ...

  7. 打印html页面

    // 打印类属性.方法定义 const Print = function (dom, options) { if (!(this instanceof Print)) return new Print ...

  8. [#Linux] CentOS 7 美化调优

    优化美化系统,是为了让新系统能更顺眼顺手,符合自己过去在windows下的使用习惯,从而实现平稳过渡. 正如开篇时谈到的,现在的桌面版linux已相当友好(特别是Ubuntu),基本不需要做什么额外设 ...

  9. Python基础Day6

    一.代码块 一个模块(模块就是py文件),一个函数,一个类,一个文件都是一个代码块,一个整体是一个代码块. 交互模式的每一行都是一个代码块(交互模式:命令提示符),相当于每行都在不同的文件 二.id ...

  10. Linux命令——pr

    参考:Linux命令——column 前言 接触这个命令的初衷是我想把一个很长的单列输出设置成多列输出,奈何column的分列输出机制太智障,直到我发现了pr 参数 pr -# 输出指定的列数. -t ...