實例講解Vue.js中router傳參

更新時間：2018年04月22日 14:08:38 投稿：laozhang

本篇文章通過實例給大家分析了Vue.js中router傳參的相關(guān)知識點，對此有興趣的朋友參考學(xué)習(xí)下。

Vue-router參數(shù)傳遞

為什么要在router中傳遞參數(shù)

設(shè)想一個場景，當前在主頁中，你需要點擊某一項查看該項的詳細信息。那么此時就需要在主頁傳遞該項的id到詳情頁，詳情頁通過id獲取到詳細信息。

vue-router 參數(shù)傳遞的方式

Parma傳參

貼代碼：

/router/index.vue

export default new Router({
 routes: [
  {
   path: '/',
   name: 'Home',
   component: Home
  },
  {
   path: '/work',
   name: 'Work',
   component: Work
  }
 ]
  })

組件Works傳遞一個work的id到組件Work

/components/Home/Comtent/Works.vue

// 觸發(fā)它傳遞一個對象到組件Work
getIt (id) {
 this.$router.push({
  path: '/work',
  name: 'Work',
  params: {
   id: id
  }
 })
  }

/components/Work/Index.vue

<template>
  <div class="work">
   work: {{id}}
  </div>
 </template>
 
 <script>
 export default {
  name: 'Work',
  data () {
   return {
    id: this.$route.params.id //拿到id
   }
  }
 }
 </script>

運行截圖:

query傳參

將上面的parmas改為query即可，即：

// 傳入
 this.$router.push({
path: '/work',
name: 'Work',
query: {
 id: id
}
 })
 
 ... ...
 
 this.$route.query.id // 獲取

parmas與query的區(qū)別

query是通過url傳遞參數(shù)，始終顯示在url中

parmas傳參，刷新頁面過后就沒有數(shù)據(jù)了，無法將獲取到的參數(shù)進行保存

總結(jié)：這兩種參數(shù)的傳遞方式，各有各的用途，具體的還要自己親手試一試才知道，前端這個領(lǐng)域，還是要多多親自動手實踐。

您可能感興趣的文章:

相關(guān)文章

使用Vue實現(xiàn)簡單計算器
這篇文章主要為大家詳細介紹了使用Vue實現(xiàn)簡單計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02
vue使用docxtemplater導(dǎo)出word
docxtemplater?是一種郵件合并工具,以編程方式使用并處理條件、循環(huán),并且可以擴展以插入任何內(nèi)容,下面我們來看看如何使用docxtemplater導(dǎo)出word吧
2025-04-04
Vue+Echarts實現(xiàn)繪制多設(shè)備狀態(tài)甘特圖
這篇文章主要為大家詳細介紹了Vue如何結(jié)合Echarts實現(xiàn)繪制多設(shè)備狀態(tài)甘特圖,文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-03-03
Vue登錄后添加動態(tài)路由并跳轉(zhuǎn)的實踐分享
這篇文章講給大家詳細介紹一下Vue如何實現(xiàn)登錄后添加動態(tài)路由并跳轉(zhuǎn)，文章通過代碼示例介紹的非常詳細，對我們的學(xué)習(xí)或工作有一定的的幫助,需要的朋友可以參考下
2023-07-07
vxe-table?使用?vxe-upload?在表格中實現(xiàn)非常強大的粘貼上傳圖片和附件功能
本文通過實例代碼介紹了vxe-table渲染器的強大功能,配合 vxe-upload 上傳,比如復(fù)制或者截圖一張圖片,通過粘貼方式快速粘貼到單元格中,能支持單張、多張、查看、預(yù)覽功能,感興趣的朋友跟隨小編一起看看吧
2024-12-12
vue實現(xiàn)直連mysql的方法步驟
Vue.js通常運行在瀏覽器環(huán)境,而瀏覽器不允許直接與MySQL數(shù)據(jù)庫進行連接,本文主要介紹了vue實現(xiàn)直連mysql的方法步驟,感興趣的可以了解一下
2024-11-11
element中el-cascader級聯(lián)選擇器只有最后一級可以多選
本文主要介紹了element中el-cascader級聯(lián)選擇器只有最后一級可以多選，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-01-01
詳解Vue、element-ui、axios實現(xiàn)省市區(qū)三級聯(lián)動
這篇文章主要介紹了Vue、element-ui、axios實現(xiàn)省市區(qū)三級聯(lián)動，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
Vue如何進行數(shù)據(jù)代理
這篇文章主要介紹了vue如何進行數(shù)據(jù)代理,通過本文學(xué)習(xí)我們了解如何代理的及驗證兩條線的問題，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-10-10
vue如何動態(tài)實時的顯示時間淺析
這篇文章主要給大家介紹了關(guān)于vue如何動態(tài)實時的顯示時間，以及vue時間戳獲取本地時間實時更新的相關(guān)資料，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05