实例讲解Vue.js中router传参


Posted in Javascript onApril 22, 2018

Vue-router参数传递

为什么要在router中传递参数

设想一个场景,当前在主页中,你需要点击某一项查看该项的详细信息。那么此时就需要在主页传递该项的id到详情页,详情页通过id获取到详细信息。

vue-router 参数传递的方式

Parma传参

贴代码:

/router/index.vue

export default new Router({
 routes: [
  {
   path: '/',
   name: 'Home',
   component: Home
  },
  {
   path: '/work',
   name: 'Work',
   component: Work
  }
 ]
  })

组件Works传递一个work的id到组件Work

/components/Home/Comtent/Works.vue

// 触发它传递一个对象到组件Work
getIt (id) {
 this.$router.push({
  path: '/work',
  name: 'Work',
  params: {
   id: id
  }
 })
  }

/components/Work/Index.vue

<template>
  <div class="work">
   work: {{id}}
  </div>
 </template>
 
 <script>
 export default {
  name: 'Work',
  data () {
   return {
    id: this.$route.params.id //拿到id
   }
  }
 }
 </script>

运行截图:

实例讲解Vue.js中router传参

实例讲解Vue.js中router传参

query传参

将上面的parmas改为query即可,即:

// 传入
 this.$router.push({
path: '/work',
name: 'Work',
query: {
 id: id
}
 })
 
 ... ...
 
 this.$route.query.id // 获取

parmas与query的区别

query是通过url传递参数,始终显示在url中

parmas传参,刷新页面过后就没有数据了,无法将获取到的参数进行保存

总结: 这两种参数的传递方式,各有各的用途,具体的还要自己亲手试一试才知道,前端这个领域,还是要多多亲自动手实践。

Javascript 相关文章推荐
jQuery select操作控制方法小结
May 26 Javascript
location.href语句与火狐不兼容的问题
Jul 04 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
AngularJS执行流程详解
Feb 17 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
js实现星星打分效果
Jul 05 Javascript
uniapp实现横向滚动选择日期
Oct 21 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
用Vue写一个分页器的示例代码
Apr 22 #Javascript
vue-cli3.0 特性解读
Apr 22 #Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 #Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 #Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 #Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 #Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 #jQuery
You might like
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
关于赌博的检讨书
2014/01/24 职场文书
企业申诉管理制度
2014/01/30 职场文书
财产公证书
2014/04/10 职场文书
见习期个人总结
2015/03/05 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
英语读书笔记
2015/07/02 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android
Redis 哨兵机制及配置实现
2022/03/25 Redis
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers