溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一.標簽傳參方式：<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項目中路由傳參的方式詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
