vue中使用el-menu和router-view实现菜单强同步

1、问题背景：

父组件：一个框架页面，里面有菜单及网站总体框架；

子组件：一个菜单具体页面

 

在点击菜单进行路由跳转的这个过程中是你自定义了一些同步路由变量的逻辑代码，现在想想如果你略过这个菜单去发生路由跳转的时候，也就是说如果通过浏览器的返回操作，跳转到了之前的网页或者前进到下一个网页，如何做同步呢？该怎么同步这个菜单与页面呢？

2、解决思路：

当然，想到的方法可能有1、浏览器API里有没有检索到路由变化的变量或事件，2、如果通过子组件去改变父组件的路由变量？

根据这两个思路，可以想

路由跳转是在父组件中执行的具体逻辑代码，

现想让子组件created初始化事件中访问一下父组件里的初始菜单同步的问题。

3、具体逻辑：

这个就是父子组件通信的问题，那么通信问题有很多种：父子、兄弟。有调用式的父子，有嵌入式（路由）的父子组件。

本问题就是路由跳转的问题。

4、代码实现：

父组件中：

其中v-on绑定的是驱动事件，如果有需要反馈到子组件的信息时，可使用v-bind绑定，子组件中需要注册props。

子组件中：

this.$emit("test_recieve");

使用这一句调用父组件的绑定事件

 

注意：这个博客只说明了父组件和子组件通信的问题解决方案。并不包含菜单与页面同步的方案。

同步方案我使用的store内存集合。