嵌套路由之间的传值,go(-1)并同时传参

嵌套路由子路由向父路由传值方式就是父子组件之间的传值方式,即使用emit。
如果是想看go(-1)的同时传值,直接到文末

假设现在有路由如下:
A是父路由,BC是子路由

{
    path: '/A',
     name: 'A',
     component: require('@/components/test/A').default,
     children: [
         {
             path: '/B',
             name: 'B',
             component: require('@/components/test/B').default
         },
         {
             path: '/C',
             name: 'C',
             component: require('@/components/test/C').default
         },             
  	]
},
1、嵌套路由一个跳转传值的套路如下:

A.vue :
在template中需加上router-view,来渲染你指定路由对应的组件,这样就是B和C了。

<template>
    <div class="A">
		 <router-view></router-view>
  </div>
</template>
跳转至B:
this.$router.push({name:'B',params:{info:info}});

B.vue中:
B实际上是加载在router-view这个容器中的,还是属于A页面的一部分,所以要只看到B,需设置样式如下:

 .B {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        height: 100vh;
 }
在B中,跳转到C:
this.$router.push({name:'C',params:{info:info}});
2、实现C跳转回A.vue并带参

C.vue中:

 //依旧是组件传值的方式
 this.$emit("selectGoods",this.selectGoods);
 this.$router.go(-2); //回退两步,即回到A

这种写法不知道好不好,但百试不爽呀!!

A.vue中:
给router-view添加一个回调事件

<router-view @selectGoods="selectGoodsBack"></router-view>

selectGoodsBack(value){
	console.log(value); //就是上面的selectGoods的值
}

这样A就获取了C的值。

如果A中的数据需刷新,可通过重新请求,改变数据;
也可以强制刷新:(不建议这么干!)

window.location.reload();
如果需要href改变:
就直接 window.location.replace(url); 或者 window.location.href = url;

selectGoodsBack(value){
    console.log('子路由返回:',value);
	//this.$router.replace('/sellerSetting?active=1'); //无效
	//强制刷新 
    let url = window.location.href.split('dist')[0];
    window.location.replace( url+"dist/sellerSetting?active=1");

}
3、总结:

1、记录一下嵌套路由写代码时的套路
2、父子路由的传值
3、子路由回到父路由刷新,重新请求数据,以后就这么干吧,如果是删除,直接数组移除这条数据,不刷新。如果增加,就重新请求,只改变数组的值。

子路由:
 this.$emit('addMemberBack', 1);  //给父路由传值,让父路由重新请求数据
 this.$router.go(-1);  //返回父路由

父路由:
<router-view @addMemberBack="addMemberBack"></router-view>
selectGoodsBack(){
//重新向后台请求数据
}

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值