vue监听返回按钮，改变返回后的页面中data的字段

问题描述：

        现在有页面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';
        },
    }
}

总结：这样就不用在两个页面之间来回修改，同时也可以抛弃路径传参数的方式（如果参数很多，想想自己都后怕），更抛弃了用本地存储的方式，优点还是不少的，

备注：如果大家还有其他的方法，欢迎下方留言评论，谢谢！