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 相关文章推荐
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
浅谈JS的原型和原型链
Jun 04 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
phpwind中的数据库操作类
2007/01/02 PHP
很好用的PHP数据库类
2009/05/27 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
javascript的BOM
2016/05/03 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
详解Python中with语句的用法
2015/04/15 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
python实现简单坦克大战
2020/03/27 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
班主任个人工作反思
2014/04/28 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
中秋联欢会主持词
2015/07/04 职场文书
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android