如何使用Vue.js中router傳參

這次帶給大家如何使用Vue.js中router傳參，使用Vue.js中router傳參的注意事項有哪些，下面就是實戰案例，一起來看一下。

Vue-router參數傳遞

為什麼要在router中傳遞參數

設想一個場景，目前在首頁中，你需要點擊某一項查看該項的詳細資訊。那麼此時就需要在首頁傳遞該項的id到詳情頁，詳情頁透過id取得到詳細資料。

vue-router 參數傳遞的方式

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

// 触发它传递一个对象到组件Work
getIt (id) {
 this.$router.push({
  path: '/work',
  name: 'Work',
  params: {
   id: id
  }
 })
  }

/components/Work/ Index.vue

<template>
  <p class="work">
   work: {{id}}
  </p>
 </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的區別

query是透過url傳遞參數，始終顯示在url中

# parmas傳參，刷新頁面過後就沒有數據了，無法將獲取到的參數進行保存

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼使用Angular開啟Font-Awesome

怎麼使用JS與TypeScript

####

以上是如何使用Vue.js中router傳參的詳細內容。更多資訊請關注PHP中文網其他相關文章！