vue路由傳參三種基本方式詳解

發(fā)布時(shí)間：2020-09-25 19:32:01 來源：腳本之家閱讀：187 作者：噠噠Da 欄目：web開發(fā)

這篇文章主要介紹了vue路由傳參三種基本方式詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

現(xiàn)有如下場(chǎng)景，點(diǎn)擊父組件的li元素跳轉(zhuǎn)到子組件中，并攜帶參數(shù)，便于子組件獲取數(shù)據(jù)。

父組件中：

<li v-for="article in articles" @click="getDescribe(article.id)">

methods：

方案一：

getDescribe(id) {
//  直接調(diào)用$router.push 實(shí)現(xiàn)攜帶參數(shù)的跳轉(zhuǎn)
    this.$router.push({
     path: `/describe/${id}`,
    })

方案一，需要對(duì)應(yīng)路由配置如下：

{
   path: '/describe/:id',
   name: 'Describe',
   component: Describe
  }

很顯然，需要在path中添加/:id來對(duì)應(yīng) $router.push 中path攜帶的參數(shù)。在子組件中可以使用來獲取傳遞的參數(shù)值。

this.$route.params.id

方案二：

父組件中：通過路由屬性中的name來確定匹配的路由，通過params來傳遞參數(shù)。

this.$router.push({
     name: 'Describe',
     params: {
      id: id
     }
    })

對(duì)應(yīng)路由配置: 這里可以添加:/id 也可以不添加，不添加數(shù)據(jù)會(huì)在url后面顯示，不添加數(shù)據(jù)就不會(huì)顯示

{
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

子組件中: 這樣來獲取參數(shù)

this.$route.params.id

方案三：

父組件：使用path來匹配路由，然后通過query來傳遞參數(shù)

這種情況下 query傳遞的參數(shù)會(huì)顯示在url后面?id=？

this.$router.push({
     path: '/describe',
     query: {
      id: id
     }
    })

對(duì)應(yīng)路由配置：

{
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

對(duì)應(yīng)子組件: 這樣來獲取參數(shù)

this.$route.query.id

注意事項(xiàng)：

1）、這里要特別注意在父組件中跳轉(zhuǎn)到子組件使用

this.$router.push("/Home");//不傳參
this.$router.push({
})；//傳參，參數(shù)以字段的形式加入到對(duì)象大括號(hào){ }中

2）、在子組件中獲取參數(shù)的時(shí)候是

this.$route.params.id

this.$route.query.id

注意是route而不是router

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

猜你喜歡