欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)目中路由傳參的方式詳解，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

相關(guān)文章

最新評(píng)論