首頁 >web前端 >js教程 >Vue.js如何進行router傳參

Vue.js如何進行router傳參

php中世界最好的语言
php中世界最好的语言原創
2018-06-06 15:12:431196瀏覽

這次帶給大家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中文網其它相關文章!

推薦閱讀:

react應用開發腳手架使用案例

怎麼操作vue.js資料綁定

###

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn