vue的传参方式汇总和router使用技巧


Posted in Javascript onMay 22, 2018

vue传参方法一

1,路由配置

{
  path: '/describe/:id',
  name: 'Describe',
  component: Describe
 }

2,使用方法

// 直接调用$router.push 实现携带参数的跳转
 this.$router.push({
// 这个id是一个变量,随便是什么值都可以
 path: /describe/${id}`,
 })

3,获取方法(在describe页面)

$route.params.id

使用以上方法可以拿到上个页面传过来的id值

vue传参方法二

 1,路由配置

{
  path: '/describe',
  name: 'Describe',
  component: Describe
 }
(这个地方默认配置就可以了,不用做任何的处理)

2,使用方法

this.$router.push({
   name: 'Describe',
   params: {
   id: id
   }
  })

父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。

 3,获取方法(在describe页面)

$route.params.id

也用params获取就可以了;

vue传参方法三

 1,路由配置

{
  path: '/describe',
  name: 'Describe',
  component: Describe
 }

(默认配置)

2,使用方法

this.$router.push({
   path: '/describe',
   query: {
   id: id
   }
  })
(params换成了query)

 3,获取方法(在describe页面)

$route.query.id

(这个地方用query还获取id,和前面用的params获取的区别在于,用query获取的id值会在url中有显示,可以看到你传过来的值)

props传值方法

父组件

(table-data这个地方可以随便取名字,不是特定的值)

<div class="content">
//这个是一个普通组件,其中tabelData可以是变量,也可以是常量,和pageInfo一样样,这里打算传递两个值过去,其实也可以用对象的方式传过去都是可以的。
 <my-table :table-data="tableData" :page-info="pageInfo" id="myTable"></my-table>
</div>

子组件

props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

prop是单向绑定的,不应该在子组件内部改变prop。不过这里的props传过来的值会随之父组件的值的改变而改变,是动态改变的。

$route使用小技巧

1,$route.path

类型: string

字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"。

2,$route.params

类型: Object

一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象。

3,$route.query

类型: Object

一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有 $route.query.user == 1,如果没有查询参数,则是个空对象。

4,$route.hash

类型: string

当前路由的 hash 值 (带 #) ,如果没有 hash 值,则为空字符串。

5,$route.fullPath

类型: string

完成解析后的 URL,包含查询参数和 hash 的完整路径。

详细请见(https://router.vuejs.org/zh-cn/api/route-object.html)

总结

以上所述是小编给大家介绍的vue的传参方式和router使用技巧,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
jQuery 动画基础教程
Dec 25 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
VUE前后端学习tab写法实例
Aug 06 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 #Javascript
Vue.js实现的表格增加删除demo示例
May 22 #Javascript
详解Chart.js轻量级图表库的使用经验
May 22 #Javascript
VUE2.0中Jsonp的使用方法
May 22 #Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 #Javascript
基于mpvue的小程序项目搭建的步骤
May 22 #Javascript
安装vue-cli的简易过程
May 22 #Javascript
You might like
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
Python中datetime常用时间处理方法
2015/06/15 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
python实现代码统计器
2019/09/19 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
JPA的特点
2014/10/25 面试题
致长跑运动员广播稿
2014/01/31 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
2015年护士节活动总结
2015/02/10 职场文书
父亲节活动总结
2015/02/12 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
详解Laravel框架的依赖注入功能
2021/05/27 PHP
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python