Vuex+嵌套路由的实现原理

#今天来讲解一下嵌套路由+Vuex的实现
##下面来讲解Vuex实现原理
1:安装vuex
cnpm install vuex --save-dev
2:新建一个store文件夹,新建index.js用来存储count,用vuex实现提交
image.png
3:在Info组件实现点击提交,提交一个changeNumber 方法,注意引入store,不能漏写store
代码如下,最关键的是要方法中提交store.commit('increase');
image.png
4:在Person组件查看,代码如下
image.png
最终效果
image.png

person组件中值发生变化了,大功告成
image.png

##下面来讲解嵌套路由实现原理
实现效果如下,在home组件中要实现信息和个人中心 可以切换
image.png

1:先引入信息info和个人中心person组件
image.png
2:在Home组件中再次定义具体路径
image.png

最终效果
image.png
image.png
大功告成!!!加油

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值