Vue基礎筆記4

路由傳參

第一種

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