问题描述:
现在有页面A和页面B,页面A有三个菜单分别为A1,A2 ,A3,默认选中A1。点击页面A3同时 ,跳转到页面B,暂定A页面原属性“activeTabId”为“bardA”,然后点击页面B的返回按钮,返回到A页面中的A3位置(改变了默认选中,实现了记忆功能),返回成功后并改变页面A中data中的“activeTabId”属性为“bardB”
解决方案:
方案1:
采用路径传参的方法。点击页面B的返回按钮通过路由配置this.$touter({path:"页面A",query{index:"参数1"}}),然后在页面A获取this.$router.query.index,通过该值判断,进而修改页面A中的‘activeTabId’为‘bardB’。
方案2:
采用本地存储的方式,实现效果和方法1类似;
方案3:
采用vue中的钩子函数(methods,watch ,created)解决。首先用watch监听“$route” , 然后配置一个方法名暂定为“changeData” ,watch:{'$route':changeData} ,在methods中定义该方法名并重新赋值,changeData(){this.activeTabId = 'bardB' ; },在然后在created中初始化这个方法,created(){this.changeData()}, 具体代码如下
export default{
data(){
return{
activeTabId:'boradA'
}
},
created(){
this.changeData()
},
watch:{
'$route': 'changeData'
},
methods:{
changeData(){
this.activeTabId = 'boradB';
},
}
}
总结:这样就不用在两个页面之间来回修改,同时也可以抛弃路径传参数的方式(如果参数很多,想想自己都后怕),更抛弃了用本地存储的方式,优点还是不少的,
备注:如果大家还有其他的方法,欢迎下方留言评论,谢谢!