Vue-CLI项目中路由传参

一.标签传参方式:<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项目中路由传参的更多相关文章

  1. vue中路由传参的方式

    一.params的类型: 配置路由格式: /router/:id 传递的方式: 在path后面跟上对应的值 传递后形成的路径: /router/123, /router/abc 通过:to字符串拼接的 ...

  2. vue学习记录④(路由传参)

    通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中 ...

  3. React中路由传参及接收参数的方式

    注意:  路由表改变后要重启服务      方式 一:          通过params         1.路由表中                     <Route path=' /s ...

  4. vue.cli项目中src目录每个文件夹和文件的用法

    assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:

  5. Vuex内容解析和vue cli项目中使用状态管理模式Vuex

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

  6. vue cli 项目中设置背景图

    https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...

  7. vue路由传参刷新丢失

    没有系统学习过vue,以前使用路由传参都是直接this.$router.push({name:'main',params:{'id': 123}})的,没有在路由定义中配置参数,如下: router: ...

  8. vue路由传参及组件传参和组件方法调用

    VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...

  9. vue中的路由传参及跨组件传参

    路由跳转   this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$r ...

随机推荐

  1. 1.mssql和mysql sql如何调优?

    mssql是指微软的SQL Server数据库服务器. mssql常见的调优方法主要分为两类, (1)代码优化,代码优化,我搜集常用到的有以下几点: 1.避免使用select *  语句 2.避免关联 ...

  2. tensorflow 使用 cpu 而不使用 gpu 问题

    查看 tensorflow 版本 conda list 例如发现 tensorflow 1.10.0 tensorflow-gpu 1.10.0 当两个版本相同时,默认会使用 cpu 版本 如果同时存 ...

  3. eclipse下mybatis-generator-config插件

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfiguration ...

  4. 应用上下文webApplicationContext

    一.先说ServletContext javaee标准规定了,servlet容器需要在应用项目启动时,给应用项目初始化一个ServletContext作为公共环境容器存放公共信息.ServletCon ...

  5. jmeter运行第三方java项目

    自己写了个简化系统操作的小工具,因为不想给别人用的时候占用本地资源于是写的是纯java项目,后面放到jmeter中通过beanshell sampler调用. java源码不贴了,把写好的项目导出成可 ...

  6. AMD vs. CommonJS?

    js开发者对js模块加载的尝试和创新从来都没有停止过,尤其是当nodejs的出现后,模块化加载的必要性更加凸显.本文不讨论如何在nodejs环境来模块化加载(创造者已经利用commonJS机制解决), ...

  7. C++ 变量判定的螺旋法则

    C++ 中一个标识符配合着各种修饰界定符,使得标识符的本意不那么直观一眼就能看出,甚至需要仔细分析,才能知道该标识符的具体你含义. 比如: void (*signal(int, void (*fp)( ...

  8. Pandas对缺失值的处理

    Pandas使用这些函数处理缺失值: isnull和notnull:检测是否是空值,可用于df和series dropna:丢弃.删除缺失值 axis : 删除行还是列,{0 or 'index', ...

  9. Eclipse通过SVN导入项目遇到的问题记录

    问题一.把子项目导入为project 原因:一个大的文件夹,里面有各个小项目,需要把自己添加需求的醒目导入为Maven Project 1.右键选 Import as project 2.右键 -&g ...

  10. Scala Class etc.

    Classes 一个源文件可包含多个类,每个类默认都是 public 类字段必须初始化,编译后默认是 private,自动生成 public 的 getter/setter :Person 示例 pr ...