路由传参

第一种

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

Vue基础笔记4的更多相关文章

  1. vue 基础笔记

    Vue01笔记 ES6模块使用和新的函数声明方式 a) Import 一定不能放在函数内, 建议放在上方 b) Export 除了声明式的以外, 尽量放在代码的下方 Import {name,age} ...

  2. Vue基础笔记3

    插槽指令 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  3. Vue基础笔记2

    目录 1. 如何获取Vue对象中的成员? 2. pre指定 3. for循环 4. todolist 5. 分隔符 6. computed 计算后的 7. vue的生命周期(讲解不全) 8. watc ...

  4. vue基础笔记

    目录 Vue 渐进式 JavaScript 框架 一.走进Vue 二.Vue实例 三.生命周期钩子 四.Vue指令 五.组件 六.Vue-CLI 项目搭建 Vue 渐进式 JavaScript 框架 ...

  5. Vue学习笔记-Vue基础入门

    此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...

  6. vue 学习笔记(二)

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  7. vue.js笔记总结

    一份不错的vue.js基础笔记!!!! 第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且 ...

  8. Vue:实践学习笔记(1)——快速使用

    Vue:实践学习笔记(1)——快速使用 Vue基础知识 0.引入Vue 官方地址:Vue的官方下载地址 Vue推荐博客:keepfool 在你的程序中快速引入Vue: <!-- 开发环境版本,包 ...

  9. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

随机推荐

  1. Python模块/包/库安装几种方法(转载)

    一.方法1: 单文件模块直接把文件拷贝到 $python_dir/Lib 二.方法2: 多文件模块,带setup.py 下载模块包(压缩文件zip或tar.gz),进行解压,CMD->cd进入模 ...

  2. pikaqiu练习平台(SQL注入 )

    sql注入漏洞 (危害是最大得) Sql注入 数据库注入漏洞,主要是开发人员在构建代码时,没有对输入边界进行安全考虑,导致攻击者可以通过合法的输入点提交一些精心构造的语句,从而欺骗后台数据库对其进行执 ...

  3. Xshell5配置ssh免密码登录-公钥与私钥登录linux服务器(xshell如何登陆上阿里云服务器)

    原文地址:https://blog.csdn.net/longgeaisisi/article/details/78680180 ssh登录提供两种认证方式:口令(密码)认证方式和密钥认证方式.其中口 ...

  4. 在MyEclipse中修改文件名出现问题

    问题描述:An exception has been caught while processing the refactoring 'Rename Compilation Unit'. 问题原因:项 ...

  5. [CF]Round514

    A Cashier 题意:一个人,一天的工作时长为\(L\),从第\(t_i\)时刻开始有长度为\(l_i\)的工作,他想在工作间隙抽烟,抽一根要\(a\)分钟,问能抽几根. 直接模拟. B Forg ...

  6. SOC-training image镜像内核文件(DE1-soc软件实验”hello_word")

    在DE1-soc软件实验”hello_word"此实验中,我开始并没有将SOC-training image镜像内核文件用win32disk写入sd卡中,直接插入sd卡,发现putty连接c ...

  7. Thinkcmf对接支付宝支付和获取用户信息

    一.         登录支付宝开放平台 平台地址:https://open.alipay.com/ 二.         创建应用并申请上线 登录后,[进入我的开放平台],依次点击[开发者中心]-& ...

  8. AcWing 148. 合并果子

    #include <iostream> #include <algorithm> #include <queue> using namespace std; int ...

  9. AcWing 790. 数的三次方根

    #include<bits/stdc++.h> using namespace std ; int main(){ double x; cin>>x; ,r=; ) { ; i ...

  10. 用fgets()和fputs()代替gets()和puts()

    gets()和puts不安全,有些平台会报错,如pat. gets输入字符串时,不进行数组下标的检查,也就是说当你的数组长度是n时,输入超过该长度的字符串的时候,编译不会出错,但是运行的时候会出现数组 ...