快捷導(dǎo)航

實(shí)例講解Vue.js中router傳參

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

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

Vue-router參數(shù)傳遞

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

設(shè)想一個(gè)場(chǎng)景，當(dāng)前在主頁(yè)中，你需要點(diǎn)擊某一項(xiàng)查看該項(xiàng)的詳細(xì)信息。那么此時(shí)就需要在主頁(yè)傳遞該項(xiàng)的id到詳情頁(yè)，詳情頁(yè)通過(guò)id獲取到詳細(xì)信息。

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

Parma傳參

貼代碼：

/router/index.vue

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

組件Works傳遞一個(gè)work的id到組件Work

/components/Home/Comtent/Works.vue

// 觸發(fā)它傳遞一個(gè)對(duì)象到組件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>

運(yùn)行截圖:

query傳參

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

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

parmas與query的區(qū)別

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

parmas傳參，刷新頁(yè)面過(guò)后就沒(méi)有數(shù)據(jù)了，無(wú)法將獲取到的參數(shù)進(jìn)行保存

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

您可能感興趣的文章:

相關(guān)文章

vue組件系列之TagsInput詳解
TagsInput 是一種可編輯的輸入框，通過(guò)回車(chē)或者分號(hào)來(lái)分割每個(gè)標(biāo)簽，用回退鍵刪除上一個(gè)標(biāo)簽。這篇文章主要介紹了vue組件TagsInput的相關(guān)知識(shí),需要的朋友可以參考下
2020-05-05
element-ui tree結(jié)構(gòu)實(shí)現(xiàn)增刪改自定義功能代碼
這篇文章主要介紹了element-ui tree結(jié)構(gòu)實(shí)現(xiàn)增刪改自定義功能代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
vue使用Google地圖的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了vue使用Google地圖的實(shí)現(xiàn)示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12
vue中el-table多級(jí)嵌套列表(菜單使用el-switch代替)
本文主要介紹了el-table多級(jí)嵌套列表(菜單使用el-switch代替)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06
淺談vue 二級(jí)路由嵌套和二級(jí)路由高亮問(wèn)題
這篇文章主要介紹了淺談vue 二級(jí)路由嵌套和二級(jí)路由高亮問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
Vue3封裝全局Dialog組件的實(shí)現(xiàn)方法
3封裝全局Dialog組件相信大家都不陌生,下面這篇文章主要給大家介紹了關(guān)于Vue3封裝全局Dialog組件的實(shí)現(xiàn)方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
vue3 組合式API defineEmits() 與 emits 組
在Vue中,defineEmits()是Vue3組合式API中用于聲明自定義事件的,而emits選項(xiàng)則用于Vue2和Vue3的選項(xiàng)式API中,defineEmits()允許使用字符串?dāng)?shù)組或?qū)ο笮问铰暶魇录?emits選項(xiàng)也支持這兩種形式,且驗(yàn)證函數(shù)可以驗(yàn)證事件參數(shù),這兩種方法都是為了更規(guī)范地在組件間通信
2024-09-09
基于vite2+Vue3編寫(xiě)一個(gè)在線幫助文檔工具
提起幫助文檔，想必大家都會(huì)想到?VuePress等。但是VuePress是“靜態(tài)網(wǎng)站生成器”，需要我們自行編寫(xiě)文檔，然后交給VuePress變成網(wǎng)站。因此，本文將用vite2+Vue3編寫(xiě)一個(gè)在線幫助文檔工具，需要的可以參考一下
2022-03-03
圖文詳解Vue3沒(méi)有代碼提示問(wèn)題的解決辦法
最近在使用Vue.js時(shí)候沒(méi)有自動(dòng)提示,就很難受,下面這篇文章主要給大家介紹了關(guān)于Vue3沒(méi)有代碼提示問(wèn)題的解決辦法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
vue計(jì)算屬性+vue中class與style綁定(推薦)
這篇文章主要介紹了vue計(jì)算屬性+vue中class與style綁定,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-03-03