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 相关文章推荐
List Installed Hot Fixes
Jun 12 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 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计算日期相差天数实例分析
2016/02/23 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
Python获取服务器信息的最简单实现方法
2015/03/05 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
flask框架视图函数用法示例
2018/07/19 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
求职推荐信
2013/10/28 职场文书
特色蛋糕店创业计划书
2014/01/28 职场文书
顶撞领导检讨书
2014/01/29 职场文书
班主任工作经验材料
2014/02/02 职场文书
全神贯注教学反思
2014/02/03 职场文书
致200米运动员广播稿
2014/02/06 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
会议欢迎标语
2014/06/30 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
初中化学教学反思
2016/02/22 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
redis 限制内存使用大小的实现
2021/05/08 Redis
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL