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 相关文章推荐
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
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 array_merge下进行数组合并的代码
2008/07/22 PHP
php数组去重的函数代码
2013/02/03 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
php curl_init函数用法
2014/01/31 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
PHP6新特性分析
2016/03/03 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
任意位置显示html菜单
2007/02/01 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
js判断密码强度的方法
2020/03/18 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
深入理解python try异常处理机制
2016/06/01 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
物业管理公司实习生自我鉴定
2013/09/19 职场文书
部队领导证婚词
2014/01/12 职场文书
应届毕业生自荐书
2014/06/18 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
党风廉正建设责任书
2015/01/29 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
Pytest中conftest.py的用法
2021/06/27 Python