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 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
BootStrap中的表单大全
Sep 07 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
js实现倒计时时钟的示例代码
2013/12/17 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
全面了解js中的script标签
2016/07/04 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
python发送邮件功能实现代码
2016/07/15 Python
python删除某个字符
2018/03/19 Python
Python实现线程状态监测简单示例
2018/03/28 Python
python操作kafka实践的示例代码
2019/06/19 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
服装店营销方案
2014/03/10 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
焦裕禄观后感
2015/06/03 职场文书
灵魂歌王观后感
2015/06/17 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle