【应用】如何实现在不同的路径下激活同一个菜单

这篇博客的讲述基于如何使用 element-ui 之 NavMenu 导航菜单 中 的 router 属性（在激活导航时以 path 进行路由跳转），大家可以先去看看上篇博客。

要实现在不同的路径下激活同一个菜单，需修改一个函数，即上篇博客中的 onRouteChanged () 函数，完整代码如下所示：

  methods: {
    onRouteChanged () {
      let that = this

      let patho = that.$route.path
      console.log('patho：', patho)  // patho：/Menu/Page3/ChartInfo

      // 将路径以'/'分割成一个数组
      let pathsplit = patho.split('/')
      console.log('pathsplit：', pathsplit)  // pathsplit：["", "Menu", "Page3", "ChartInfo"]

      // 将分割好的数组的前三个元素用'/'连接起来
      let patharr = new Array('', pathsplit[1], pathsplit[2])
      let path = patharr.join('/')
      console.log('path：', path) // path： /Menu/Page3

      that.path = path
    }
  }

举例来说，现在有 '/Menu/Page3/ChartInfo' 和 '/Menu/Page3' 两条路径，都需要激活 '导航三' 这个菜单，所以我们需要将路径 '/Menu/Page3/ChartInfo' 经过分割和连接，最后变成 '/Menu/Page3' 的样子，就可以激活 '导航三' 了。

效果：

路径 '/Menu/Page3'

路径 '/Menu/Page3/ChartInfo'

END