欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

實例講解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組件系列之TagsInput詳解

    vue組件系列之TagsInput詳解

    TagsInput 是一種可編輯的輸入框，通過回車或者分號來分割每個標簽，用回退鍵刪除上一個標簽。這篇文章主要介紹了vue組件TagsInput的相關(guān)知識,需要的朋友可以參考下
    2020-05-05
  • element-ui tree結(jié)構(gòu)實現(xiàn)增刪改自定義功能代碼

    element-ui tree結(jié)構(gòu)實現(xiàn)增刪改自定義功能代碼

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

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

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

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

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

    淺談vue 二級路由嵌套和二級路由高亮問題

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

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

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

    vue3 組合式API defineEmits() 與 emits 組

    在Vue中,defineEmits()是Vue3組合式API中用于聲明自定義事件的,而emits選項則用于Vue2和Vue3的選項式API中,defineEmits()允許使用字符串數(shù)組或?qū)ο笮问铰暶魇录?emits選項也支持這兩種形式,且驗證函數(shù)可以驗證事件參數(shù),這兩種方法都是為了更規(guī)范地在組件間通信
    2024-09-09
  • 基于vite2+Vue3編寫一個在線幫助文檔工具

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

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

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

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

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

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

最新評論