Vue页面、组件之间传参方式繁多，此处罗列出常用的几种方式，欢迎审阅补充。
一丶路由传参这里的路由传参以编程式 router.push(...) 为例，声明式 <router-link :to="..."> 与之类似。此处模拟情景为从 componentsA.vue 页面跳转到 componentsB.vue 页面传参。首先，路由配置信息如下：
router.js
import Vue from 'vue' import Router from 'vue-router' import componentsA from './components/componentsA' //在components下创建componentsA.vue import componentsB from './components/componentsB' //在components下创建componentsB.vue Vue.use(Router) export default new Router({ routes:[ { path:'/componentsA', name:'componentsA', component:componentsA }, { path:'/componentsB', name:'componentsB', component:componentsB } ] })
1.1 路由配置传参
首先确定自己要传的参数名，将路由配置修改一下,传name,age,sex三个参数：
{ path:'/componentsB/:name/:age/:sex', name:'componentsB', component:componentsB }
在 componentsA.vue 页面通过 this.$router.push 配置与之对应的参数：
componentsA.vue
<template> <div> <div>我是组件A</div> <button @click='routerToB1'>方式一跳转到组件B</button> </div> </template> <script> export default{ data(){ return{ person:{name:'Gene',age:'18',sex:'male'} } }, methods: { routerToB1() { this.$router.push({ path:`componentsB/${this.person.name}/${this.person.age}/${this.person.sex}` }) } }, } </script> <style> </style>
然后在 componentsB.vue 页面用 this.$route.params 接收参数：
componentsB.vue
<template> <div> <div>我是组件B</div> </div> </template> <script> export default{ created(){ this.getRouterData() }, methods: { getRouterData(){ const param = this.$route.params console.log(param)//{name:'Gene',age:'18',sex:'male'} } }, } </script> <style> </style>
点击按钮"方式一跳转到组件B"，componentsB页面打印出 {name:'Gene',age:'18',sex:'male'} ,成功获取到A页面传过来的参数，并且地址栏显示为 localhost:8889/#/componentsB/Gene/18/male （端口号根据自己设置的来），表明这种传参方式url会携带参数。
1.2 params传参
首先将刚才路由配置修改部分还原，在 componentsA.vue 页面添加按钮"方式二跳转到组件B":
componentsA.vue
<template> <div> <div>我是组件A</div> <button @click='routerToB1'>方式一跳转到组件B</button> <button @click='routerToB2'>方式二跳转到组件B</button> </div> </template>
在 methods 中添加方法 routerToB2 ，使用路由属性 name 来确定匹配的路由，使用属性 params 来传递参数：
componentsA.vue
routerToB2(){ this.$router.push({ name:'componentsB', params:{ exa:'我是传到组件B的参数' } }) },
componentsB.vue 保持不变，params传参方式获取参数也是通过 this.$route.params ，点击A页面新添加的按钮"方式二跳转到组件B"，在B页面打印出 {exa: "我是传到组件B的参数"} ，传参成功，地址栏为 localhost:8889/#/componentsB ，表明这种方式url不会携带参数。
1.3 query传参
这种方式和params传参方式类似，在 componentsA.vue 页面继续添加按钮"方式三跳转到组件B":
componentsA.vue
<template> <div> <div>我是组件A</div> <button @click='routerToB1'>方式一跳转到组件B</button> <button @click='routerToB2'>方式二跳转到组件B</button> <button @click='routerToB3'>方式三跳转到组件B</button> </div> </template>
在 methods 中添加方法 routerToB3 ，使用路由属性 name 或者 path 来确定匹配的路由，使用属性 query 来传参：
componentsA.vue
routerToB3(){ this.$router.push({ name:'componentsB',// path:'/componentsB' query:{ que:'我是通过query传到组件B的参数' } }) }
在 componentsB.vue 页面通过 this.$route.query 来获取参数：
componentsB.vue
getRouterData(){ const query = this.$route.query console.log(query)//{que: "我是通过query传到组件B的参数"} }
查看地址栏为 localhost:8889/#/componentsB?que=我是通过query传到组件B的参数 ，显然这种方式url会携带参数。
1.4 小结
路由配置传参注意书写格式 /:id ，获取参数都是通过 $route 而不是 $router
params 传参和 query 传参区别类似于 post 和 get 方法。 params 传参地址栏不会显示参数，而 query 传参会将参数显示在地址栏中
params 传参刷新页面参数会丢失，另外两种不会
params 传参对应的路由属性是 name ，而 query 传参对应的路由属性既可以是 name ，也可以是 path
二丶使用缓存