实例讲解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 相关文章推荐
限制文本框输入N个字符的js代码
May 13 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
vue.js中created方法作用
Mar 30 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 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
PHP实现简易用户登录系统
2020/07/10 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
浅析node.js中close事件
2014/11/26 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
Python序列化pickle模块使用详解
2020/03/05 Python
flask项目集成swagger的方法
2020/12/09 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
三下乡活动方案
2014/01/31 职场文书
担保书格式及范文
2014/04/01 职场文书
法制报告会主持词
2014/04/02 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
琅琊山导游词
2015/02/05 职场文书
环保建议书作文500字
2015/09/14 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
Java spring定时任务详解
2021/10/05 Java/Android