这次给大家带来vue-router组件间参数相互传递的方法，vue-router组件参数相互传递的注意事项有哪些，下面就是实战案例，一起来看一下。
通过VueRouter来实现组件之间的跳转：参数的传递，具体内容如下
login ---用户名--->main
①明确发送方和接收方
②配置接收方的路由地址
{path:'/myTest',component:TestComponent}
-->
{path:'/myTest/:id',component:TestComponent}
③接收方获取传递来的数据
this.$route.params.id
④跳转的时候，发送参数
this.$router.push('/myTest/20')
跳转
代码：
传参
{{msg}}
//创建主页面组件
var myMain = Vue.component("main-component",{
//保存登录传递过来的数据
data:function(){
return {
uName:''
}
},
template:`
主页面用户名:{{uName}}
`,
//挂载该组件时自动拿到数据
beforeMount:function(){
//接收参数
console.log(this.$route.params);
this.uName = this.$route.params.myName ;
}
})
//创建登录页面组件
var myLogin = Vue.component("login-component",{
//保存用户输入的数据
data:function(){
return {
userInput:""
}
},
methods:{
toMain:function(){
//跳转到主页面，并将用户输入的名字发送过去
this.$router.push("/main/"+this.userInput);
console.log(this.userInput);
}
},
template:`
登录页面
登录到主页面
登录到主页面
`
})
var NotFound = Vue.component("not-found",{
template:`
404 Page Not Found
返回登录页
`
})
//配置路由词典
const myRoutes = [
{path:"",component:myLogin},
{path:"/login",component:myLogin},
//注意冒号,不用/否则会当成地址
{path:"/main/:myName",component:myMain},
//没有匹配到任何页面则跳转到notfound页面
{path:"*",component:NotFound}
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
// 注意,路由地址
传参练习
{{msg}}
//创建产品列表组件
var myList = Vue.component("product-list",{
//保存产品列表的数据
data:function(){
return{
productList:["苹果","华为","三星","小米","vivo"]
}
},
template:`
这是列表页
//将index传递过去
{{tmp}}
`
})
//详情页组件
var myDetail = Vue.component("product-detail",{
//保存传递过来的index
data:function(){
return{
myIndex:""
}
},
//在挂载完成后,将接收到的index赋值给myIndex
mounted:function(){
this.myIndex = this.$route.params.id;
},
template:`
这是详情页
这是id为：{{myIndex}}的产品
`
})
//页面找不到的时候
var NotFound = Vue.component("not-found",{
template:`
404 Page Not Found
`
})
// 配置路由词典
const myRoutes = [
{path:"",component:myList},
{path:"/list",component:myList},
{path:"/detail/:id",component:myDetail},
{path:"*",component:NotFound},
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：

Vue组件间的参数传递

1、父组件与子组件传值

父组件传给子组件：子组件通过props方法接受数据；
子组件传给父组件： $emit 方法传递参数

2、非父子组件间的数据传递，兄弟组件传值

eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道）。

组件间传递参数的几种方式
父组件向子组件传递
// 父组件
import CenterTemplate from '../../components/admin/userCenterTemplate'
export default {
components: {
'center-template': CenterTemplate
},
data () {
return {
userinfo: {name: 'jack'}
}
},
}
// 子组件
export default {
props: {
// 接收
form: {
type: Object,
default: {
name: '',
}
}
},
}
子元素调用父元素的方法
直接在子元素中调用父元素的方法
// 子元素
changeInput(){
// 子元素调用父元素的方法1
if(this.$parent.nullSerarchResult){
// 新增标签
this.$parent.nullSerarchResult()
}
},
// 父元素
nullSerarchResult(val){
this.pageNum = 1
this.init({
searchKey: val
})
},
在子元素中使用$emit调用父元素的方法
// 子元素
新增
addNewFun(){
// 第三种方式是发布给父元素
this.$emit('addTagFun')
}
// 父元素
@addTagFun='addTagFun'
>
addTagFun(){
this.$router.push('/admin/add_blog')
},
在子元素中绑定父元素的方法名
// 子元素
搜索
props: {
searchResult: {
type: Function,
default: null
}
},
searchResultChild(){
// 调用方法2，这种需要再props中声明
if(this.searchResult){
this.searchResult(this.serachValue)
}
},
// 父元素
:searchResult='searchResult'
>
searchResult(val){
this.pageNum = 1
this.init({
searchKey: val
})
},
使用event bus来实现组件间的通讯
// common/bus.js
import Vue from 'vue';
// 使用 Event Bus
const bus = new Vue();
export default bus;
// 组件1(接收通知信号)
import bus from '@/common/bus.js'
export default{
data(){
return {
collapseData: ''
}
},
created() {
// 监听collapse，有变动就会收到通知，并改变collapseData值
bus.$on('collapse', msg => {
this.collapseData = msg
})
}
}
// 组件2 发布信号
import bus from '@/common/bus.js'
export default {
methods: {
sendData(){
// 发布信号，触发这个函数，其他的接收函数都会收到相应的信息
bus.$emit('collapse', '信息')
}
}
}
还有一种就是借用vuex传递信息
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
userinfo: {},
},
mutations: {
'SET_ROLES':(state,userinfo) => {
state.userinfo = userinfo
},
},
actions: {
getUser({commit, state},userinfo){
commit('SET_ROLES',userinfo)
},
}
})
export default store
// views/slider.vue
import { mapState, mapAcions } from 'vuex'
export default{
computed: {
// 解构赋值
...mapState({
userinfo: state => state.userinfo
})
},
methods: {
...mapActions({
getUser: 'getUser'
}),
handleUserInfo(){
// 调用
this.$store.dispatch('getUser','对象')
}
}
}

目录

 

方法一：通过路由带参数进行传值

方法二：通过设置 Session Storage/local Storage缓存的形式进行传递

1、 原生用法使用

2、 对Session Storage/local Storage缓存进行统一封装

方法三：父子组件之间的传值(通过props属性)

1、父组件给子组件传值

2、子组件给父组件传值(通过emit事件)

方法四：不同组件之间传值，通过eventBus

方法五：vuex进行传值

参考

方法一：通过路由带参数进行传值

需求：两个页面A,B，页面A传递参数值phase给页面B.

做法：

1）页面A附加参数：//更新地址栏里面的信息哦

router.push({path: "/iteration/track", query: {...this.$route.query, phase: this.phase}})

PS: this.$router.push({ path: '/iteration/track', query: {...this.$route.query, phase: this.phase} }) // 跳转到B

2） 页面B获取地址栏中的参数；

this.$route.query.project_id

方法二：通过设置 Session Storage/local Storage缓存的形式进行传递

想了解更多有关sessionStorage/localStorage,请移步：

https://blog.csdn.net/huazhongkejidaxuezpp/article/details/50283081

https://blog.csdn.net/huazhongkejidaxuezpp/article/details/84308916

1、 原生用法使用

window.localStorage['aaa']='一个例子啊'

console.log(window.localStorage.getItem('aaa'))

window.localStorage.setItem('test1',[1,2,3,4,5,6])

window.localStorage.setItem('test2',{userId:'iiiiii',token:7788777})

window.localStorage.setItem('test3','dfdfdf')

console.log(window.localStorage.getItem('test1'))

console.log(window.localStorage.getItem('test2'))

console.log(window.localStorage.getItem('test3'))



window.sessionStorage.setItem('test1',[1,2,3,4,5,6])

window.sessionStorage.setItem('test2',{userId:'iiiiii',token:7788777})

window.sessionStorage.setItem('test3','dfdfdf')

console.log(window.sessionStorage.getItem('test1'))

console.log(window.sessionStorage.getItem('test2'))

console.log(window.sessionStorage.getItem('test3'))

缺点：

1）到处直接使用localstorage['aaa']='xxx'这些原生语法实现，这样耦合度太高了，假如有一天需要换实现方式，或者对存储大小做一些控制，那么需要修改的代码就会很多

2)起的key的名字难免会重复，而且这样也会造成全局污染

3) 因为localstorage的使用不规范，所以造成了存储空间的浪费和不够用

解决：

封装storage的使用方法，统一处理

规范storage的key值的命名规则

规范storage的使用规范

2、 对Session Storage/local Storage缓存进行统一封装

import localstorage from '@src/util/localstorage';

import sessionstorage from '@src/util/sessionstorage';

import storage from '@src/util/storage';



storage.storage('l','djjdjjd','jwejjwjejw',1);

storage.storage('s','djjdjjd','jwejjwjejw',1);

let a = storage.storage('l','djjdjjd',undefined,null);

console.log(a)

 

例如：页面A,B

页面A中设置：storage.set('s','djjdjjd','jwejjwjejw',1);

页面B中获取：storage.get('s')

ps:Session Storage（程序退出销毁） 和 Local Storage（长期保存）

localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M

方法三：父子组件之间的传值(通过props属性)

1、父组件给子组件传值

父组件核心代码：

ps: SubmitTest 为子组件名称

<SubmitTest :iteration_id='this.iteration_id'/>

子组件核心代码：

props: {
        iteration_id: {
            type: String
        }

2、子组件给父组件传值(通过emit事件)

具体参考：https://www.cnblogs.com/LoveAndPeace/p/7273648.html

方法四：不同组件之间传值，通过eventBus

场景：小项目，页面量较少的情况下使用

使用前可以在全局定义一个eventBus


window.eventBus = new Vue();
　　在需要传递参数的组件中，定义一个emit发送需要传递的值，键名可以自己定义（可以为对象）


eventBus.$emit('eventBusName', id);
　　在需要接受参数的组件重，用on接受该值（或对象）


//val即为传递过来的值<br>eventBus.$on('eventBusName', function(val) {<br> 　　console.log(val)<br>})
　　最后记住要在beforeDestroy()中关闭这个eventBus

eventBus.$off('eventBusName');

方法五：vuex进行传值

场景：vuex主要是是做数据交互，适用于大项目，页面量较多的业务

解决难题：父子组件传值可以很容易办到，但是兄弟组件间传值（兄弟组件下又有父子组件），或者大型spa单页面框架项目，页面多并且一层嵌套一层的传值，异常麻烦，用vuex来维护共有的状态或数据会显得得心应手

例子： 两个组件A和B，vuex维护的公共数据是地理位置，现在A和B页面显示的是相同的地理位置。 需求想实现：如果A修改了地理位置，则B页面的显示随之修改，反之B修改同理。这就是vuex维护公共状态或数据的魅力，在一个地方修改了数据，在这个项目的其他页面都会变成这个数据。

vuex了解：

https://vuex.vuejs.org/zh/

 

参考

https://blog.csdn.net/qq_35430000/article/details/79291287

https://www.cnblogs.com/ygtq-island/p/6728137.html

https://www.cnblogs.com/LoveAndPeace/p/7273648.html