vue+element-ui有效管理导航页(NavMenu)的当前页(active)

在用vue+element-ui开发时，需要导航页的当前选中项与实际显示页面对应。通过控件操作的跳转是可以正常对应的。但是直通地址访问时，页面显示ok，控件的当前项毫无变化。针对这个问题网上也查了些资料，解决方案归纳为两类：1，用全局变量绑定当前页面，页面切换时变更该全局变量来实现当前项的变更。这种方法完全没去尝试过，不知道是否可行。我采用的是第二种方法。2，通过获取route的path参数来修改当前项。

updated() {//路径及按键操作时调用    this.updateForcus();  },  mounted() {//载入时调用，F5刷新会起效    this.updateForcus();  },  methods: {    updateForcus() {      var path = this.$route.path;      if (path=="/content/cabList" || path=="/content/curCabStatus") {        this.navselected = "/content/cabList";      } else if (path == "/content/boxList") {        this.navselected = "/content/boxList";      } else if (path == "/content/order/current") {        this.navselected = "/content/order/current";      } else if (path == "/content/order/history") {        this.navselected = "/content/order/history";      }      //更新nav的当前active      //经测试F5刷新只会调用mounted，路径访问及鼠标点击只会调用updated。    },  }

updated()会在控件跳转和直接路径访问时被调用。vue的路由跳转就是对当前页面的更新。mounted()会在F5刷新或第一次访问时被调用。其实就是载入页面的时候会调用mounted挂载页面，F5刷新会触发重新载入。因此，在两个方法中都加入当前路径检测。路径检测就很简单了，获取route的path然后经比对后设置el-menu的navselected即可。