Vue-CLI項目中路由傳參

Vue-CLI項目中路由傳參

一.標籤傳參方式：<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
"""