路由传参

第一种

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之旅的开始day1

    Python有哪些种类: JPython.IronPython.JavaScriptPython.RubyPython.CPython(即将开始学习种类,最为常见的种类).pypy pypy:这是用C ...

  2. Hibernate项目的基本步骤和一些错误提示

    以数据库中有一张user表为例: 1.编写POJO持久化类User.javaPOJO(Plain Old Java Objects),简单的Java对象.一个POJO类不用继承任何类,也无须实现任何接 ...

  3. windows10中docker nginx开启 但页面访问不了

    Windows下对docker端口进行映射,但是当你在主机的浏览器中,打开localhost:port无法访问对应的服务. docker是运行在Linux上的,在Windows中运行docker,实际 ...

  4. java面试题错题集(牛客网错题)

    一.关于Object类的说法正确 Java中所有的类都直接或间接继承自Object,无论是否明确的指明,无论其是否是抽象类. Object的equals方法,只有一句话,return this==ob ...

  5. OpenCV的视频输入和相似度测量

    #include <iostream> #include <string> #include <iomanip> // 控制浮动类型的打印精度 #include & ...

  6. 第五十三篇 Linux相关——Web服务器

        No.1. Apache基本操作 安装:sudo yum -y install httpd 启动:service httpd start 停止:service httpd stop 查看服务运 ...

  7. L2-1 分而治之

    思路 这题的意思是,如果把这些点打掉,其他的点是否能够完全不连通. 用并查集,或者打上标记之后,判断每个点是否还能到达其他点,如果一个点可以到达其他任何点,都应该输出否. 代码 #include &l ...

  8. Android开发实战——记账本(4)

    开发日志(4)——MainActivity 在MainActivity中编写了几个方法.首先,点击账本的一条记录可以选择删除他,然后重写了fab,使之在点击他后能够添加记录.还写了删除全部记录的方法. ...

  9. Is It Good To Use LED Wall Light In Household Space?

    Wall lamps are mostly used for local lighting, can play a very decorative effect, improve the visual ...

  10. 转载:DRC

    https://cn.mathworks.com/help/audio/ug/dynamic-range-control.html?requestedDomain=cn.mathworks.com h ...