快捷導(dǎo)航

Vue-CLI項(xiàng)目中路由傳參的方式詳解

更新時(shí)間：2019年09月01日 12:08:56 作者：小小咸魚YwY

這篇文章主要介紹了Vue-CLI項(xiàng)目中路由傳參的方式詳解，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一.標(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}`">詳情頁</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是通過數(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}
         }">詳情頁</router-link>

接收層

let id = this.$route.params.pk

第三種

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

您可能感興趣的文章:

相關(guān)文章

vue最簡單的前后端交互示例詳解
這篇文章主要介紹了vue最簡單的前后端交互示例詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-10-10
vite的搭建與使用的詳細(xì)步驟
本文主要介紹了vite的搭建與使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
Vue自定義組件雙向綁定實(shí)現(xiàn)原理及方法詳解
這篇文章主要介紹了Vue自定義組件雙向綁定實(shí)現(xiàn)原理及方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-09-09
Spring Boot/VUE中路由傳遞參數(shù)的實(shí)現(xiàn)代碼
在路由時(shí)傳遞參數(shù)，一般有兩種形式，一種是拼接在url地址中，另一種是查詢參數(shù)。這篇文章主要介紹了Spring Boot/VUE中路由傳遞參數(shù),需要的朋友可以參考下
2018-03-03
vue實(shí)現(xiàn)數(shù)字翻頁動畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)數(shù)字翻頁動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
基于vue2實(shí)現(xiàn)一個(gè)日歷組件
最近在做一個(gè)類似課程表的需求,需要自制一個(gè)日歷來支持功能及展現(xiàn),就順便研究一下應(yīng)該怎么開發(fā)日歷組件,下面這篇文章主要給大家介紹了關(guān)于如何基于vue2實(shí)現(xiàn)一個(gè)日歷組件的相關(guān)資料,需要的朋友可以參考下
2022-12-12
通過vue提供的keep-alive減少對服務(wù)器的請求次數(shù)
這篇文章主要介紹了通過vue提供的keep-alive減少對服務(wù)器的請求次數(shù),文中給大家補(bǔ)充介紹了vue路由開啟keep-alive時(shí)的注意點(diǎn)，需要的朋友可以參考下
2018-04-04
Vite處理html模板插件之vite-plugin-html插件使用
這篇文章主要給大家介紹了關(guān)于Vite處理html模板插件之vite-plugin-html插件使用的相關(guān)資料,Vite是一個(gè)現(xiàn)代化的前端構(gòu)建工具,而vite-plugin-html是Vite的一個(gè)插件,用于在構(gòu)建時(shí)自動生成HTML文件,需要的朋友可以參考下
2023-10-10
Vue實(shí)現(xiàn)Google第三方登錄的示例代碼
本文記錄作者在vue項(xiàng)目中使用到Google第三方登錄，查詢到的資料文檔也不詳細(xì)，故此把自己所遇到的坑及問題詳細(xì)的記錄下來。
2021-07-07
關(guān)于axios配置請求頭content-type實(shí)例詳解
現(xiàn)在前端開發(fā)中需要通過Ajax發(fā)送請求獲取后端數(shù)據(jù)是很普遍的一件事情了,下面這篇文章主要介紹了關(guān)于axios配置請求頭content-type的相關(guān)資料,需要的朋友可以參考下
2022-04-04