Vue CLI項目中路由傳參 一.標簽傳參方式：\\ 第一種 router.js 傳遞層 接收層 演變體 第二種 router.js 傳遞層 接收層 第三種 router.js 傳遞層 接收層 二.邏輯傳參：this.$router 第一種 python """ 路由： path: '/course ...
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
"""
