0


【Vue 路由(vue—router)二】路由传参(params的类型 、Query参数的类型、路由name)

目录


前言

此内容为连载,想要完整内容参考,可以私聊。

一、路由传参

效果展示

通过传参,可以让Persons路由组建中的内容,在新的路由组件Show显示出来,Show路由组件要嵌套到Persons路由组件中

Persons路组件中的内容

a0d6a9386c7a4f609f194c9792d9e82a.png

76956efb5770420e9361f72dd205da7d.gif

1.params的类型 (后附源码)

** path:‘show/:id/:realname’ :id/:realname,是为传参所声明的,props:true 可以理解成可以传参,这只是其中的一种方法,也是个人觉得最简单理解的方法。 **4cfd6f2c0f564223bd9357cc7d8c1230.png

**在persons路由组件中经过v-for遍历数组获得值,赋值给传参目标 **

269c4896a3e247408a659772cf0a8cce.png

在show路由组建中,使用props:['id','realname'],这要对应上,在index.js所声明的名字

4fbbd2618715438db74a8eb854bbcf0b.png

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)">点击跳转</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>

2.​​​​​​query参数的类型

**跟普通的路由声明一样,这里起的名字,在后续会使用到 **

b9bf7563e6b149f08f65d317142b9fe1.png

在persons路由组件的遍历,得到想要的值,与上面一种方法有着很大的区别

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

?id=${item.id}&realname=${item.realname}是获取id,获取姓名

e3e762190f5f4b87bdc1c4641301008c.png

在show路由组件中,需要通过计算属性来获得,传参的内容

09f389b7722942d7b903948962704253.png

query参数的类型源码同样无视注释代码

同上顺序,一一对应

{
  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)">点击跳转</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>

3.路由name

简化路由的跳转 路由较长的使用名称

上述query跳转 推荐如下写法:

<router-link :to="{name:'show',query:{id:item.id,realname:item.realname}}">姓名:{{item.realname}}</router-link> -->

其他代码与其上相同,如下第二张图片显示,起的名字就是这样的使用方法

f1d534a1c62e42adb08a44a059a23cd2.png

0c1b59d55bf94eb0b08ee5c6fb4dbe8c.png


本文转载自: https://blog.csdn.net/yzq0820/article/details/126491006
版权归原作者 小余努力搬砖 所有, 如有侵权,请联系我们删除。

“【Vue 路由(vue—router)二】路由传参(params的类型 、Query参数的类型、路由name)”的评论:

还没有评论