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路由传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue--点击当前增加class,其他删除class的方法
今天小编就为大家分享一篇vue--点击当前增加class,其他删除class的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Element Dropdown下拉菜单的使用方法
这篇文章主要介绍了Element Dropdown下拉菜单的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
Vue3表单组件el-form校验规则rules属性示例详解
在el-form中正确使用rules校验是非常重要的,rules使用不当容易出现规则不生效、规则一直被触发等各种现象,这篇文章主要给大家介绍了关于Vue3表单组件el-form校验规则rules属性的相关资料,需要的朋友可以参考下
2024-08-08
nuxt 实现在其它js文件中使用store的方式
这篇文章主要介绍了nuxt 实现在其它js文件中使用store的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
详解Vue路由开启keep-alive时的注意点
这篇文章主要介绍了详解Vue路由开启keep-alive时的注意点，非常具有实用价值，有兴趣的朋友可以了解一下
2017-06-06
在vue项目中配置你自己的启动命令和打包命令方式
这篇文章主要介绍了在vue项目中配置你自己的启动命令和打包命令方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue.js 中的异步组件是什么及使用异步组件的示例
异步组件是 Vue.js 中提高应用程序性能和加载速度的重要功能之一,在使用异步组件时,需要注意组件的加载时间、错误处理和命名规范等问题,本文将介绍 Vue.js 中异步组件的概念、优势以及如何使用异步组件,感兴趣的朋友一起看看吧
2023-10-10
Vue uni-app框架实现上拉加载下拉刷新功能
uni-app是一个使用Vue.js(opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台
2022-09-09
Vue mock.js模拟数据实现首页导航与左侧菜单功能
这篇文章主要介绍了Vue mock.js模拟数据实现首页导航与左侧菜单功能，mockjs是用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url，mockjs可以拦截ajax请求，返回设定好的数据
2022-09-09
vue实现移动端input上传视频、音频
这篇文章主要为大家详细介绍了vue实现移动端input上传视频、音频，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08