vue2 router 动态传参,多个参数的实例


Posted in Javascript onNovember 10, 2017

这个是用vue-cli生成的项目下使用

比如有个路由跳转时需要带两个参数:

<router-link to='/tr'>查看</router-link>

可以这样写:

<router-link to='/tr/uid/pid'>查看</router-link>

然后去router.js 中 处理这个路由:

import Vue from 'vue'
import Router from 'vue-router'
import tr from '@/components/tr.vue'
import tab from '@/components/tab.vue'

Vue.use(Router)

export default new Router({
 routes: [

 {
  path:'/tr/:uid/:pid',
  name: 'tr',
  component:tr
 },
 {
  path:'/tab',
  name: 'tab',
  component:tab
 }
 ]
})

需要在router.js 中使用vue-router,具体是在path:'/tr/:uid/:pid', 反斜杠后加冒号,意思是后面就是路由的参数。

然后去对应tr.vue组件中接受这个路由参数:

通过实例的this.$route.params,可访问这个key-value对象,

我们给请求路由赋个值看看:

<router-link to='/tr/15/122'>查看</router-link>

打印如下Object {uid: "15", pid: "122"}

以上这篇vue2 router 动态传参,多个参数的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
Javascript函数的参数
Jul 16 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 #Javascript
JS+Canvas绘制动态时钟效果
Nov 10 #Javascript
javascript实现电脑和手机版样式切换
Nov 10 #Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 #jQuery
js定时器+简单的动画效果实例
Nov 10 #Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 #Javascript
angular之ng-template模板加载
Nov 09 #Javascript
You might like
php数组去重复数据示例
2014/02/25 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
PHP7新增函数
2021/03/09 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
python pygame实现2048游戏
2018/11/20 Python
Python如何实现强制数据类型转换
2019/11/22 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
vue实力踩坑之push当前页无效
2022/04/10 Vue.js
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android