Vue-CLI项目中路由传参的方式详解


Posted in Javascript onSeptember 01, 2019

一.标签传参方式:<router-link></router-link>

第一种

router.js
{
  path: '/course/detail/:pk',
  name: 'course-detail',
  component: CourseDetail
}

传递层

<!-- card的内容
{
  id: 1,
  bgColor: 'red',
  title: 'Python基础'
}
-->
<router-link :to="`/course/detail/${card.id}`">详情页</router-link>

接收层

let id = this.$route.params.pk

演变体

"""
{
  path: '/course/:pk/:name/detail',
  name: 'course-detail',
  component: CourseDetail
}

<router-link :to="`/course/${card.id}/${card.title}/detail`">详情页</router-link>

let id = this.$route.params.pk
let title = this.$route.params.name
"""

第二种

router.js
{
  // 浏览器链接显示:/course/detail,注:课程id是通过数据包方式传递
  path: '/course/detail',
  name: 'course-detail',
  component: CourseDetail
}

传递层

<!-- card的内容
{
  id: 1,
  bgColor: 'red',
  title: 'Python基础'
}
-->
<router-link :to="{
         name: 'course-detail',
         params: {pk: card.id}
         }">详情页</router-link>

接收层

let id = this.$route.params.pk

第三种

router.js
{
  // 浏览器链接显示:/course/detail?pk=1,注:课程id是通过路由拼接方式传递
  path: '/course/detail',
  name: 'course-detail',
  component: CourseDetail
}

传递层

<!-- card的内容
{
  id: 1,
  bgColor: 'red',
  title: 'Python基础'
}
-->
<router-link :to="{
         name: 'course-detail',
         query: {pk: card.id}
         }">详情页</router-link>

接收层

let id = this.$route.query.pk

二.逻辑传参:this.$router

第一种

"""
路由:
path: '/course/detail/:pk'

跳转:id是存放课程id的变量

this.$router.push(`/course/detail/${id}`)

接收:

let id = this.$route.params.pk
"""

第二种

"""
路由:
path: '/course/detail'

跳转:id是存放课程id的变量
this.$router.push({
          'name': 'course-detail',
          params: {pk: id}
        });

接收:

let id = this.$route.params.pk
"""

第三种

"""
路由:
path: '/course/detail'

跳转:id是存放课程id的变量
this.$router.push({
          'name': 'course-detail',
          query: {pk: id}
        });

接收:

let id = this.$route.query.pk
"""

总结

以上所述是小编给大家介绍的Vue-CLI项目中路由传参的方式详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
讨论javascript(一)工厂方式 js面象对象的定义方法
Dec 15 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
js 代码优化点滴记录
Feb 19 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
详解vue 组件的实现原理
Nov 12 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 #Javascript
vue中的v-if和v-show的区别详解
Sep 01 #Javascript
react中Suspense的使用详解
Sep 01 #Javascript
vue 实现微信浮标效果
Sep 01 #Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 #Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 #Javascript
vue动态子组件的两种实现方式
Sep 01 #Javascript
You might like
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
《小猫刮胡子》教学反思
2014/02/21 职场文书
公司慰问信范文
2015/03/23 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
运动会5000米加油稿
2015/07/21 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python