一.標簽傳參方式：<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.pklet 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項目中路由傳參的方式詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
