Vue-CLI项目中路由传参
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项目中路由传参的更多相关文章
- vue中路由传参的方式
一.params的类型: 配置路由格式: /router/:id 传递的方式: 在path后面跟上对应的值 传递后形成的路径: /router/123, /router/abc 通过:to字符串拼接的 ...
- vue学习记录④(路由传参)
通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中 ...
- React中路由传参及接收参数的方式
注意: 路由表改变后要重启服务 方式 一: 通过params 1.路由表中 <Route path=' /s ...
- vue.cli项目中src目录每个文件夹和文件的用法
assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
- vue cli 项目中设置背景图
https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...
- vue路由传参刷新丢失
没有系统学习过vue,以前使用路由传参都是直接this.$router.push({name:'main',params:{'id': 123}})的,没有在路由定义中配置参数,如下: router: ...
- vue路由传参及组件传参和组件方法调用
VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...
- vue中的路由传参及跨组件传参
路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$r ...
随机推荐
- 1.mssql和mysql sql如何调优?
mssql是指微软的SQL Server数据库服务器. mssql常见的调优方法主要分为两类, (1)代码优化,代码优化,我搜集常用到的有以下几点: 1.避免使用select * 语句 2.避免关联 ...
- tensorflow 使用 cpu 而不使用 gpu 问题
查看 tensorflow 版本 conda list 例如发现 tensorflow 1.10.0 tensorflow-gpu 1.10.0 当两个版本相同时,默认会使用 cpu 版本 如果同时存 ...
- eclipse下mybatis-generator-config插件
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfiguration ...
- 应用上下文webApplicationContext
一.先说ServletContext javaee标准规定了,servlet容器需要在应用项目启动时,给应用项目初始化一个ServletContext作为公共环境容器存放公共信息.ServletCon ...
- jmeter运行第三方java项目
自己写了个简化系统操作的小工具,因为不想给别人用的时候占用本地资源于是写的是纯java项目,后面放到jmeter中通过beanshell sampler调用. java源码不贴了,把写好的项目导出成可 ...
- AMD vs. CommonJS?
js开发者对js模块加载的尝试和创新从来都没有停止过,尤其是当nodejs的出现后,模块化加载的必要性更加凸显.本文不讨论如何在nodejs环境来模块化加载(创造者已经利用commonJS机制解决), ...
- C++ 变量判定的螺旋法则
C++ 中一个标识符配合着各种修饰界定符,使得标识符的本意不那么直观一眼就能看出,甚至需要仔细分析,才能知道该标识符的具体你含义. 比如: void (*signal(int, void (*fp)( ...
- Pandas对缺失值的处理
Pandas使用这些函数处理缺失值: isnull和notnull:检测是否是空值,可用于df和series dropna:丢弃.删除缺失值 axis : 删除行还是列,{0 or 'index', ...
- Eclipse通过SVN导入项目遇到的问题记录
问题一.把子项目导入为project 原因:一个大的文件夹,里面有各个小项目,需要把自己添加需求的醒目导入为Maven Project 1.右键选 Import as project 2.右键 -&g ...
- Scala Class etc.
Classes 一个源文件可包含多个类,每个类默认都是 public 类字段必须初始化,编译后默认是 private,自动生成 public 的 getter/setter :Person 示例 pr ...