Vue如何實(shí)現(xiàn)router傳參

本文小編為大家詳細(xì)介紹“Vue如何實(shí)現(xiàn)router傳參”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue如何實(shí)現(xiàn)router傳參”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

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>

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ò)后就沒有數(shù)據(jù)了，無(wú)法將獲取到的參數(shù)進(jìn)行保存

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開發(fā)者使用vue。

讀到這里，這篇“Vue如何實(shí)現(xiàn)router傳參”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。