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

  <ul class="table_info" v-for="item in customeLsit">
<li>{{item.name}}</li>
<li>{{item.phone}}</li>
<li>{{item.date}}</li>
<li class="detail" @click="customeDetail(item.id)">详情</li>

这是列表页面,需要传递参数到详情页,下面给出三种方法

方法一:直接在路由路径后面加参数

customeDetail(id){
console.log('id',id);
this.$router.push({
path:'/custome/customeDetailPage/${id}',
})
},
需要对应路由配置如下:
{
path:'/custome/customeDetailPage/:id',
component:CDetailPage
},
//需要在path中添加/:id来对应参数 //详情页获取传递的参数
methods:{
getParams(){
let routerParams = this.$route.params.id;
this.customId = routerParams;
console.log('id',routerParams);
}, },
created(){
this.getParams()
}

方法二:利用name属性来匹配路由,然后通过params传递参数

 //列表页面传参数
customeDetail(id){
console.log('id',id);
this.$router.push({
name:'CDetailPage', //注意一定要用name属性匹配路由
params:{
dataObj:id
}
})
},
//对应路由配置
{
path:'/custome/customeDetailPage',
name:'CDetailPage',
component:CDetailPage
},
//详情页面接收参数
methods:{
getParams(){
let routerParams = this.$route.params.dataObj;
this.customId = routerParams;
console.log('id',routerParams);
}, },
created(){
this.getParams()
}

第三种方法:通过path匹配路由,然后通过query传递参数

//列表页面传参
customeDetail(id){
console.log('id',id);
this.$router.push({
path:'/custome/customeDetailPage',
query:{
name:'id',
dataObj:id
}
})
},
//路由配置,name属性可有可无
{
path:'/custome/customeDetailPage',
component:CDetailPage
}, //我写的时候是没有用name属性
//详情页获取属性
methods:{
getParams(){
let routerParams = this.$route.query.dataObj;
this.customId = routerParams;
console.log('id',routerParams);
}, },
created(){
this.getParams()
}

这是query传参是路由显示的参数

vue路由传参的三种方式区别(params,query)的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

  7. vue 路由传参的三种方法

    API在这里  https://router.vuejs.org/guide/essentials/navigation.html 第一种传参 通过路由属性中的name来确定匹配的路由,通过param ...

  8. React路由传参的三种方式

    方式 一:          通过params         1.路由表中                     <Route path=' /sort/:id '   component= ...

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

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

随机推荐

  1. UNET学习笔记1 - 总览

    UNET为两类人设计: (1)使用Unity开发简单多人在线游戏.这类用户可以从NetworkManager或者the High Level API开始: (2)开发复杂多人在线游戏或者开发网络服务. ...

  2. java 线程协作 wait(等待)与 notiy(通知)

    一.wait().notify()和notifyAll() 为了更好的支持多线程之间的协作,JDK提供了三个重要的本地方法 //调用某个对象的wait()方法能让当前线程阻塞,并且当前线程必须拥有此对 ...

  3. Java——List集合

    package om.hanqi.test; import java.util.ArrayList; import java.util.List; public class Test01 { publ ...

  4. redis API使用说明

    List相关: LPOP key : 删除并取得LIST头部一个元素 RPOP key : 删除并取得LIST尾部一个元素 BLPOP key [key ...] timeout : 删除并取得LIS ...

  5. poj 3368 Frequent values(段树)

    Frequent values Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 13516   Accepted: 4971 ...

  6. C#中的多线程超时处理实践

    最近我正在处理C#中关于timeout行为的一些bug.解决方案非常有意思,所以我在这里分享给广大博友们. 我要处理的是下面这些情况: 我们做了一个应用程序,程序中有这么一个模块,它的功能向用户显示一 ...

  7. quartz入门详解

    http://www.cnblogs.com/monian/p/3822980.html http://www.blogjava.NET/baoyaer/articles/155645.html 另: ...

  8. Django Rest Framework-介绍

    什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为"表征状态转移" RE ...

  9. linux计划任务(转)

    文章转自https://blog.csdn.net/jixieyang3701/article/details/79410725 linux 系统则是由 cron (crond) 这个系统服务来控制的 ...

  10. Python 个人笔记(一)

    csv文件读取 使用csv标准库模块对csv文件进行读写 如下,读取名为filename的csv文件. 其中第一行为表头的列名,从第二行开始为数据内容(假设有两列). import csv with ...