vue路由传参的基本实现方式小结【三种方式】


Posted in Javascript onFebruary 05, 2020

本文实例讲述了vue路由传参的基本实现方式。分享给大家供大家参考,具体如下:

前言

vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转。传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式。

方式一:params 传参(显示参数)

params 传参(显示参数)又可分为 声明式 和 编程式 两种方式

1、声明式 router-link

该方式是通过 router-link 组件的 to 属性实现,该方法的参数可以是一个字符串路径,或者一个描述地址的对象。使用该方式传值的时候,需要子路由提前配置好参数,例如:

//子路由配置
{
 path: '/child/:id',
 component: Child
}
//父路由组件
<router-link :to="/child/123">进入Child路由</router-link>

2、编程式 this.$router.push

使用该方式传值的时候,同样需要子路由提前配置好参数,例如:

//子路由配置
{
 path: '/child/:id',
 component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
  path:'/child/${id}',
})

在子路由中可以通过下面代码来获取传递的参数值

this.$route.params.id

方式二:params 传参(不显示参数)

params 传参(不显示参数)也可分为 声明式 和 编程式 两种方式,与方式一不同的是,这里是通过路由的别名 name 进行传值的

1、声明式 router-link

该方式也是通过 router-link 组件的 to 属性实现,例如:

<router-link :to="{name:'Child',params:{id:123}}">进入Child路由</router-link>

2、编程式 this.$router.push

使用该方式传值的时候,同样需要子路由提前配置好参数,不过不能再使用 :/id 来传递参数了,因为父路由中,已经使用 params 来携带参数了,例如:

//子路由配置
{
 path: '/child,
 name: 'Child',
 component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
  name:'Child',
  params:{
   id:123
  }
})

在子路由中可以通过下面代码来获取传递的参数值

this.$route.params.id

注意:上述这种利用 params 不显示 url 传参的方式会导致在刷新页面的时候,传递的值会丢失

方式三:query 传参(显示参数)

query 传参(显示参数)也可分为 声明式 和 编程式 两种方式

1、声明式 router-link

该方式也是通过 router-link 组件的 to 属性实现,不过使用该方式传值的时候,需要子路由提前配置好路由别名(name 属性),例如:

//子路由配置
{
 path: '/child,
 name: 'Child',
 component: Child
}
//父路由组件
<router-link :to="{name:'Child',query:{id:123}}">进入Child路由</router-link>

2、编程式 this.$router.push

使用该方式传值的时候,同样需要子路由提前配置好路由别名(name 属性),例如:

//子路由配置
{
 path: '/child,
 name: 'Child',
 component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
  name:'Child',
  params:{
   id:123
  }
})

在子路由中可以通过下面代码来获取传递的参数值

this.$route.query.id

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
Vue项目全局配置微信分享思路详解
May 04 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
Vue的props父传子的示例代码
May 20 Javascript
Vuex的API文档说明详解
Feb 05 #Javascript
如何实现iframe父子传参通信
Feb 05 #Javascript
JavaScript对象原型链原理详解
Feb 05 #Javascript
基于Vue的侧边目录组件的实现
Feb 05 #Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 #Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 #jQuery
JS代码优化的8点建议
Feb 04 #Javascript
You might like
php环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
解析PHP提交后跳转
2013/06/23 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
js 幻灯片的实现
2011/12/06 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
Python算法之栈(stack)的实现
2014/08/18 Python
如何将python中的List转化成dictionary
2016/08/15 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
python opencv如何实现图片绘制
2020/01/19 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
生物专业个人自荐信范文
2013/11/29 职场文书
体育教学随笔感言
2014/02/24 职场文书
委托书样本
2014/04/02 职场文书
运动会演讲稿200字
2014/08/25 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
2014年德育工作总结
2014/11/20 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书