一.標(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}`">詳情頁(yè)</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`">詳情頁(yè)</router-link>let id = this.$route.params.pklet title = this.$route.params.name"""

第二種

router.js{  // 瀏覽器鏈接顯示：/course/detail，注：課程id是通過(guò)數(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}         }">詳情頁(yè)</router-link>

接收層

let id = this.$route.params.pk

第三種

router.js{  // 瀏覽器鏈接顯示：/course/detail?pk=1，注：課程id是通過(guò)路由拼接方式傳遞  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}         }">詳情頁(yè)</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)目中路由傳參的方式詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！