vue路由傳參3種的基本模式（詳細教學）

這篇文章主要為大家詳細介紹了vue路由傳參的3種基本模式，具有一定的參考價值，有興趣的小夥伴們可以參考一下

路由是連接各個頁面的橋樑，而參數在其中扮演者異常重要的角色，在一定意義上，決定兩座橋樑是否能夠連接成功。

在vue路由中，支援3中傳參方式。

場景，點擊父元件的li元素跳到子元件中，並攜帶參數，以便子元件取得對應li的數據，顯示相應的正確的內容。

父元件中：

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

方案一：

getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
    this.$router.push({
     path: `/describe/${id}`,
    })

// 方案一，需要对应路由配置如下：
  {
   path: '/describe/:id',
   name: 'Describe',
   component: Describe
  }
// 很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。

// 在子组件中可以使用来获取传递的参数值。
$route.params.id

#方案二：

// 父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。
    this.$router.push({
     name: 'Describe',
     params: {
      id: id
     }
    })

// 对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。
  {
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

//子组件中: 这样来获取参数
$route.params.id

方案三：

// 父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？
  this.$router.push({
     path: '/describe',
     query: {
      id: id
     }
    })

// 对应路由配置：
  {
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

// 对应子组件: 这样来获取参数
$route.query.id

// 这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是
$router 这很重要~~~

上面是我整理給大家的，希望未來會對大家有幫助。

相關文章：

有關在vue中element-ui如何實作在table表格中捲動載入方法

有關React元件效能最佳化詳細講解

利用vue如何實現裁切圖片同時實現放大、縮小、旋轉功能（詳細教學）

#

以上是vue路由傳參3種的基本模式（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！