Vue-CLI项目中路由传参的方式详解
更新时间：2019年09月01日 12:08:56 作者：小小咸鱼YwY
这篇文章主要介绍了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最简单的前后端交互示例详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
本文主要介绍了vite的搭建与使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要介绍了Vue自定义组件双向绑定实现原理及方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
在路由时传递参数，一般有两种形式，一种是拼接在url地址中，另一种是查询参数。这篇文章主要介绍了Spring Boot/VUE中路由传递参数,需要的朋友可以参考下2018-03-03
这篇文章主要为大家详细介绍了vue实现数字翻页动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
最近在做一个类似课程表的需求,需要自制一个日历来支持功能及展现,就顺便研究一下应该怎么开发日历组件,下面这篇文章主要给大家介绍了关于如何基于vue2实现一个日历组件的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了通过vue提供的keep-alive减少对服务器的请求次数,文中给大家补充介绍了vue路由开启keep-alive时的注意点，需要的朋友可以参考下2018-04-04
Vite处理html模板插件之vite-plugin-html插件使用
这篇文章主要给大家介绍了关于Vite处理html模板插件之vite-plugin-html插件使用的相关资料,Vite是一个现代化的前端构建工具,而vite-plugin-html是Vite的一个插件,用于在构建时自动生成HTML文件,需要的朋友可以参考下2023-10-10
本文记录作者在vue项目中使用到Google第三方登录，查询到的资料文档也不详细，故此把自己所遇到的坑及问题详细的记录下来。2021-07-07
现在前端开发中需要通过Ajax发送请求获取后端数据是很普遍的一件事情了,下面这篇文章主要介绍了关于axios配置请求头content-type的相关资料,需要的朋友可以参考下2022-04-04
最新评论