Vue路由传参详细介绍

更新时间：2022年09月10日 10:20:46 作者：小余努力搬砖

这篇文章主要介绍了Vue路由传参的两种方式query和params,介绍了query和params区别与总结，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下

路由传参

效果展示

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

Persons路组件中的内容

params的类型（后附源码）

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

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

在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)">点击跳转</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参数的类型

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

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

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

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

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

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>

路由name

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

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

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

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

到此这篇关于Vue路由传参详细介绍的文章就介绍到这了,更多相关Vue路由传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue2 Vue-cli中使用Typescript的配置详解
Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星，足以说明其以悄然成为主流。下面这篇文章主要给大家介绍了关于Vue2 Vue-cli中使用Typescript的配置的相关资料，需要的朋友可以参考下。
2017-07-07
Vue用户管理的增删改查功能详解
这篇文章主要为大家详细介绍了Vue用户管理的增删改查功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
VueJs监听window.resize方法示例
本篇文章主要介绍了VueJs监听window.resize方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
在Vue3中使用vue-qrcode库实现二维码生成的方法
在Vue3中实现二维码生成需要使用第三方库来处理生成二维码的逻辑,常用的库有 qrcode和 vue-qrcode,这篇文章主要介绍了在Vue3中使用vue-qrcode库实现二维码生成,需要的朋友可以参考下
2023-12-12
基于vue和react的spa进行按需加载的实现方法
这篇文章主要介绍了基于vue和react的spa进行按需加载,需要的朋友可以参考下
2018-09-09
vue3项目vite.config.js配置代理、端口、打包名以及图片压缩
这篇文章主要给大家介绍了关于vue3项目vite.config.js配置代理、端口、打包名以及图片压缩的相关资料,因为3.0版本中vue已经内置了很多关于webpack的配置,一般情况下开箱即用,需要修改则可以在vue.config.js文件中完成,需要的朋友可以参考下
2023-12-12
vue-以文件流-blob-的形式-下载-导出文件操作
这篇文章主要介绍了vue-以文件流-blob-的形式-下载-导出文件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
Vue头像处理方案小结
这篇文章主要介绍了Vue头像处理方案，实现思路主要是通过获取后台返回头像url，判断图片宽度，高度。具体实例代码大家参考下本文
2018-07-07
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
这篇文章主要介绍了vue2.0嵌套路由实现豆瓣电影分页功能(附demo),这里整理了详细的代码,有需要的小伙伴可以参考下。
2017-03-03
Vue 全家桶实现移动端酷狗音乐功能
这篇文章主要介绍了Vue 全家桶实现移动端酷狗音乐功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-11-11