Vue路由傳參詳細介紹

更新時間：2022年09月10日 10:20:46 作者：小余努力搬磚

這篇文章主要介紹了Vue路由傳參的兩種方式query和params,介紹了query和params區(qū)別與總結(jié)，結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下

路由傳參

效果展示

通過傳參，可以讓Persons路由組建中的內(nèi)容，在新的路由組件Show顯示出來，Show路由組件要嵌套到Persons路由組件中

Persons路組件中的內(nèi)容

params的類型（后附源碼）

path：‘show/:id/:realname’ :id/:realname，是為傳參所聲明的，props：true 可以理解成可以傳參，這只是其中的一種方法，也是個人覺得最簡單理解的方法。

在persons路由組件中經(jīng)過v-for遍歷數(shù)組獲得值，賦值給傳參目標

在show路由組建中，使用props:['id','realname'],這要對應上，在index.js所聲明的名字

params的類型源碼不要在意注釋代碼

跟上文順序一樣，一一對應

{
  path:'/persons',
  component:Persons,
  children:[
    {
      path:'show/:id/:realname',component:Show,props:true
    // name:'show',  path:'show',component:Show
    }
  ]
},

<template>
  <div>
    <ul >
        <li v-for="item in persons" :key="item.id">
        <router-link :to="`/persons/show/${item.id}/${item.realname}`">姓名：{{item.realname}}</router-link>
        <!-- <router-link :to="`/persons/show/?id=${item.id}&realname=${item.realname}`">姓名：{{item.realname}}</router-link> -->
        <!-- <router-link :to="{name:'show',query:{id:item.id,realname:item.realname}}">姓名：{{item.realname}}</router-link> -->
        <button @click="push(item)">點擊跳轉(zhuǎn)</button>
        </li>
	</ul>
<hr>
    <router-view></router-view>	
  </div>
</template>
<script>
export default {
name:'Persons',
data(){
    return{
        persons:[
            {id:1,realname:'張三'},
            {id:2,realname:'李四'},
            {id:3,realname:'王五'},
            {id:4,realname:'趙六'}
        ]
    }
},
methods: {
  // push(item){
  //   this.$router.push(`/persons/show/${item.id}/${item.realname}`)
  // },
},
}
</script>
<style>
</style>

<template>
  <div>
    id:{{id}}姓名:{{realname}}
  </div>
</template>
<script>
export default {
name:'Show',
props:['id','realname'],
data(){
    return{
       
    }
},
computed: {
  // id(){
  //   return this.$route.query.id
  // },
  // realname(){
  //   return this.$route.query.realname 
  // }
},
}
</script>
<style>
</style>

??????query參數(shù)的類型

跟普通的路由聲明一樣，這里起的名字，在后續(xù)會使用到

在persons路由組件的遍歷，得到想要的值，與上面一種方法有著很大的區(qū)別

<router-link :to="`/persons/show/?id=${item.id}&realname=${item.realname}`">姓名：{{item.realname}}</router-link>

?id=${item.id}&realname=${item.realname}是獲取id，獲取姓名

在show路由組件中，需要通過計算屬性來獲得，傳參的內(nèi)容

query參數(shù)的類型源碼同樣無視注釋代碼

同上順序，一一對應

{
  path:'/persons',
  component:Persons,
  children:[
    {
      // path:'show/:id/:realname',component:Show,props:true
    name:'show',  path:'show',component:Show
    }
  ]
},

<template>
  <div>
    <ul >
        <li v-for="item in persons" :key="item.id">
        <!-- <router-link :to="`/persons/show/${item.id}/${item.realname}`">姓名：{{item.realname}}</router-link> -->
        <router-link :to="`/persons/show/?id=${item.id}&realname=${item.realname}`">姓名：{{item.realname}}</router-link>
        <!-- <router-link :to="{name:'show',query:{id:item.id,realname:item.realname}}">姓名：{{item.realname}}</router-link> -->
        <!-- <button @click="push(item)">點擊跳轉(zhuǎn)</button> -->
        </li>
	</ul>
<hr>
    <router-view></router-view>	
  </div>
</template>
<script>
export default {
name:'Persons',
data(){
    return{
        persons:[
            {id:1,realname:'張三'},
            {id:2,realname:'李四'},
            {id:3,realname:'王五'},
            {id:4,realname:'趙六'}
        ]
    }
},
methods: {
  // push(item){
  //   this.$router.push(`/persons/show/${item.id}/${item.realname}`)
  // },
},
}
</script>
<style>
</style>

<template>
  <div>
    id:{{id}}姓名:{{realname}}
  </div>
</template>
<script>
export default {
name:'Show',
// props:['id','realname'],
data(){
    return{
    }
},
computed: {
  id(){
    return this.$route.query.id
  },
  realname(){
    return this.$route.query.realname 
  }
},
}
</script>
<style>
</style>