实例讲解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 相关文章推荐
JavaScript 模拟用户单击事件
Dec 31 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
JavaScript中的细节分析
Jun 30 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
js实现简单抽奖功能
Nov 24 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_SELF的安全问题
2009/09/05 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
Python全局变量操作详解
2015/04/14 Python
全面分析Python的优点和缺点
2018/02/07 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
行政部主管岗位职责
2013/12/28 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
合作意向协议书范本
2014/03/31 职场文书
课例研修方案
2014/05/31 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python