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 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
Vue精简版风格概述
Jan 30 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 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手册及PHP编程标准
2006/12/17 PHP
PHP中的CMS的涵义
2007/03/11 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
常用一些Javascript判断函数
2012/08/14 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
Python3爬虫学习入门教程
2018/12/11 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
Django组件content-type使用方法详解
2019/07/19 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
C语言笔试题回忆
2015/04/02 面试题
我的中国梦演讲稿高中篇
2014/08/19 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
MySQL基础(二)
2021/04/05 MySQL
Python数据分析之绘图和可视化详解
2021/06/02 Python
Java实现多文件上传功能
2021/06/30 Java/Android