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
"""

總結

以上所述是小編給大家介紹的Vue-CLI項目中路由傳參的方式詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回覆大家的！