Vue系列:通过vue-router如何传递参数示例


Posted in Javascript onJanuary 16, 2017

使用vue-router 来实现webapp的页面跳转,有时候需要传递参数,做法如下:

参考文献:http://router.vuejs.org/en/named.html

主要有以下几个步骤:

(1) 设置好路由配置

router.map({
 '/history/:deviceId/:dataId': {
 name: 'history', // give the route a name
 component: { ... }
 }
})

这里有2个关键点:

a)给该路由命名,也就是上文中的 name: 'history',

b)在路径中要使用在路径中使用冒号开头的数字来接受参数,也就是上文中的 :deviceId, :dataId;

(2)在v-link中传递参数;

<a v-link="{ name: 'history', params: { deviceId: 123, dataId:456 }}">history</a>

这里的123,456都可以改用变量。

比如该template所对应的组件有2个变量定义如下:

data: function() {

 return {

  deviceId:123,

  dataId:456
  }

}

此时上面那个v-link可以改写为:

<a v-link="{ name: 'history', params: { deviceId: deviceId, dataId: dataId }}">history</a>

(3)在router的目标组件上获取入参

比如在router目标组件的ready函数中可以这么使用。

ready: function(){

  console.log('deviceid: ' + this.$route.params.deviceId);

  console.log('dataId: ' + this.$route.params.dataId);

 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript定义函数的方法
Dec 06 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
jQuery选择器全集详解
Nov 24 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
webpack入门必知必会
Jan 16 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 Javascript
微信小程序 登录实例详解
Jan 16 #Javascript
微信小程序 传值取值的几种方法总结
Jan 16 #Javascript
详解vue-Resource(与后端数据交互)
Jan 16 #Javascript
微信小程序 封装http请求实例详解
Jan 16 #Javascript
详解vue-validator(vue验证器)
Jan 16 #Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 #Javascript
webpack入门必知必会
Jan 16 #Javascript
You might like
浅析PHP水印技术
2007/02/14 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
Javascript 学习书 推荐
2009/06/13 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
Python转码问题的解决方法
2008/10/07 Python
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
Django模板语言 Tags使用详解
2019/09/09 Python
没编程基础可以学python吗
2020/06/17 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
应聘英语教师求职信
2014/04/24 职场文书
公司门卫工作职责
2014/06/28 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
自我检讨报告
2015/01/28 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang