Vue-CLI項(xiàng)目中路由傳參的方式詳解
更新時(shí)間：2019年09月01日 12:08:56 作者：小小咸魚YwY
這篇文章主要介紹了Vue-CLI項(xiàng)目中路由傳參的方式詳解，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
一.標(biāo)簽傳參方式：<router-link></router-link>
第一種
router.js
{
path: '/course/detail/:pk',
name: 'course-detail',
component: CourseDetail
}
傳遞層
<!-- card的內(nèi)容
{
id: 1,
bgColor: 'red',
title: 'Python基礎(chǔ)'
}
-->
<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是通過數(shù)據(jù)包方式傳遞
path: '/course/detail',
name: 'course-detail',
component: CourseDetail
}
傳遞層
<!-- card的內(nèi)容
{
id: 1,
bgColor: 'red',
title: 'Python基礎(chǔ)'
}
-->
<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的內(nèi)容
{
id: 1,
bgColor: 'red',
title: 'Python基礎(chǔ)'
}
-->
<router-link :to="{
name: 'course-detail',
query: {pk: card.id}
}">詳情頁</router-link>
接收層
let id = this.$route.query.pk
二.邏輯傳參：this.$router
第一種
""" 路由： path: '/course/detail/:pk'
跳轉(zhuǎn)：id是存放課程id的變量
this.$router.push(`/course/detail/${id}`)
接收：
let id = this.$route.params.pk """
第二種
"""
路由：
path: '/course/detail'
跳轉(zhuǎn)：id是存放課程id的變量
this.$router.push({
'name': 'course-detail',
params: {pk: id}
});
接收：
let id = this.$route.params.pk
"""
第三種
"""
路由：
path: '/course/detail'
跳轉(zhuǎn)：id是存放課程id的變量
this.$router.push({
'name': 'course-detail',
query: {pk: id}
});
接收：
let id = this.$route.query.pk
"""
總結(jié)
以上所述是小編給大家介紹的Vue-CLI項(xiàng)目中路由傳參的方式詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時(shí)回復(fù)大家的！
相關(guān)文章
這篇文章主要介紹了vue最簡單的前后端交互示例詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
本文主要介紹了vite的搭建與使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
Vue自定義組件雙向綁定實(shí)現(xiàn)原理及方法詳解
這篇文章主要介紹了Vue自定義組件雙向綁定實(shí)現(xiàn)原理及方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
Spring Boot/VUE中路由傳遞參數(shù)的實(shí)現(xiàn)代碼
在路由時(shí)傳遞參數(shù)，一般有兩種形式，一種是拼接在url地址中，另一種是查詢參數(shù)。這篇文章主要介紹了Spring Boot/VUE中路由傳遞參數(shù),需要的朋友可以參考下2018-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)數(shù)字翻頁動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
最近在做一個(gè)類似課程表的需求,需要自制一個(gè)日歷來支持功能及展現(xiàn),就順便研究一下應(yīng)該怎么開發(fā)日歷組件,下面這篇文章主要給大家介紹了關(guān)于如何基于vue2實(shí)現(xiàn)一個(gè)日歷組件的相關(guān)資料,需要的朋友可以參考下2022-12-12
通過vue提供的keep-alive減少對服務(wù)器的請求次數(shù)
這篇文章主要介紹了通過vue提供的keep-alive減少對服務(wù)器的請求次數(shù),文中給大家補(bǔ)充介紹了vue路由開啟keep-alive時(shí)的注意點(diǎn)，需要的朋友可以參考下2018-04-04
Vite處理html模板插件之vite-plugin-html插件使用
這篇文章主要給大家介紹了關(guān)于Vite處理html模板插件之vite-plugin-html插件使用的相關(guān)資料,Vite是一個(gè)現(xiàn)代化的前端構(gòu)建工具,而vite-plugin-html是Vite的一個(gè)插件,用于在構(gòu)建時(shí)自動生成HTML文件,需要的朋友可以參考下2023-10-10
Vue實(shí)現(xiàn)Google第三方登錄的示例代碼
本文記錄作者在vue項(xiàng)目中使用到Google第三方登錄，查詢到的資料文檔也不詳細(xì)，故此把自己所遇到的坑及問題詳細(xì)的記錄下來。2021-07-07
關(guān)于axios配置請求頭content-type實(shí)例詳解
現(xiàn)在前端開發(fā)中需要通過Ajax發(fā)送請求獲取后端數(shù)據(jù)是很普遍的一件事情了,下面這篇文章主要介紹了關(guān)于axios配置請求頭content-type的相關(guān)資料,需要的朋友可以參考下2022-04-04