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

Vue-router參數(shù)傳遞

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

設(shè)想一個(gè)場(chǎng)景，當(dāng)前在主頁(yè)中，你需要點(diǎn)擊某一項(xiàng)查看該項(xiàng)的詳細(xì)信息。那么此時(shí)就需要在主頁(yè)傳遞該項(xiàng)的id到詳情頁(yè)，詳情頁(yè)通過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傳參，刷新頁(yè)面過后就沒有數(shù)據(jù)了，無(wú)法將獲取到的參數(shù)進(jìn)行保存

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com