亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間：2018年04月22日 14:08:38   投稿：laozhang  
本篇文章通過實(shí)例給大家分析了Vue.js中router傳參的相關(guān)知識(shí)點(diǎn)，對(duì)此有興趣的朋友參考學(xué)習(xí)下。

Vue-router參數(shù)傳遞

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

設(shè)想一個(gè)場(chǎng)景，當(dāng)前在主頁中，你需要點(diǎn)擊某一項(xiàng)查看該項(xiàng)的詳細(xì)信息。那么此時(shí)就需要在主頁傳遞該項(xiàng)的id到詳情頁，詳情頁通過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是通過url傳遞參數(shù)，始終顯示在url中

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

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

相關(guān)文章

  • vue組件系列之TagsInput詳解

    vue組件系列之TagsInput詳解

    TagsInput 是一種可編輯的輸入框，通過回車或者分號(hào)來分割每個(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)增刪改自定義功能代碼

    這篇文章主要介紹了element-ui tree結(jié)構(gòu)實(shí)現(xiàn)增刪改自定義功能代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue使用Google地圖的實(shí)現(xiàn)示例代碼

    vue使用Google地圖的實(shí)現(xiàn)示例代碼

    這篇文章主要介紹了vue使用Google地圖的實(shí)現(xiàn)示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-12-12
  • vue中el-table多級(jí)嵌套列表(菜單使用el-switch代替)

    vue中el-table多級(jí)嵌套列表(菜單使用el-switch代替)

    本文主要介紹了el-table多級(jí)嵌套列表(菜單使用el-switch代替)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-06-06
  • 淺談vue 二級(jí)路由嵌套和二級(jí)路由高亮問題

    淺談vue 二級(jí)路由嵌套和二級(jí)路由高亮問題

    這篇文章主要介紹了淺談vue 二級(jí)路由嵌套和二級(jí)路由高亮問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • Vue3封裝全局Dialog組件的實(shí)現(xiàn)方法

    Vue3封裝全局Dialog組件的實(shí)現(xiàn)方法

    3封裝全局Dialog組件相信大家都不陌生,下面這篇文章主要給大家介紹了關(guān)于Vue3封裝全局Dialog組件的實(shí)現(xiàn)方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-06-06
  • vue3 組合式API defineEmits() 與 emits 組件選項(xiàng)詳解

    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編寫一個(gè)在線幫助文檔工具

    基于vite2+Vue3編寫一個(gè)在線幫助文檔工具

    提起幫助文檔，想必大家都會(huì)想到?VuePress等。但是VuePress是“靜態(tài)網(wǎng)站生成器”，需要我們自行編寫文檔，然后交給VuePress變成網(wǎng)站。因此，本文將用vite2+Vue3編寫一個(gè)在線幫助文檔工具，需要的可以參考一下
    2022-03-03
  • 圖文詳解Vue3沒有代碼提示問題的解決辦法

    圖文詳解Vue3沒有代碼提示問題的解決辦法

    最近在使用Vue.js時(shí)候沒有自動(dòng)提示,就很難受,下面這篇文章主要給大家介紹了關(guān)于Vue3沒有代碼提示問題的解決辦法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2023-01-01
  • vue計(jì)算屬性+vue中class與style綁定(推薦)

    vue計(jì)算屬性+vue中class與style綁定(推薦)

    這篇文章主要介紹了vue計(jì)算屬性+vue中class與style綁定,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-03-03

最新評(píng)論