前端基础学习-实现菜单默认高亮

实现菜单默认高亮（切换切面后刷新，页面与菜单对应）

在创建完项目会出现刷新当前页面，但是菜单会回到初始状态，这里主要记录一下，当我们刷新页面后，菜单高亮与对应页面相匹配

在element-ui官网可以看到，default-active绑定的是当前激活菜单的 index

我们在菜单中，index所绑定的变量是path，即路由路径，所以我们实现当前页面对应菜单默认高亮，可以想办法截取到path，将其赋值给default-active绑定的变量

实现方法
（1）将el-menu中的index与path绑定

<el-menu
          :default-active="active"
          ref="menunRef"
          @select="handleSelect"
          style="border:none"
          >
          <el-submenu v-for="itemTitle in menusList" :index="itemTitle.path" :key="itemTitle.path">
            <template slot="title">
              <span>{{ itemTitle.title }}</span>
            </template>
            <el-menu-item v-for="item in itemTitle.children" :index="item.path" :key="item.path">
              <template slot="title">{{ item.title }}</template>
            </el-menu-item>
          </el-submenu>
        </el-menu>

以下是menuList

export default [
  {
    title: '基础学习',
    path: '/baseLearn',
    name: 'baseLearn',
    children: [
      {
        path: 'formLearn',
        name: 'formLearn',
        title: '表单学习'
      },
      {
        path: 'tableLearn',
        name: 'tableLearn',
        title: 'table学习'
      }
    ]
  }
]

（2）截取路由赋值给active

  computed: {
    menusList () {
      return menuList
    },
    active () {
      console.log(this.$route.path.lastIndexOf('/'), '获取从最后到/获取到的位置下标')
      let indexArr = this.$route.path.lastIndexOf('/') + 1
      console.log(this.$route.path.substr(indexArr), '截取到的路由')
      return this.$route.path.substr(indexArr)
    }
  },

可以看到我们打印出来的内容

后记

在这里也可以用监听

  watch: {
    // 监听路由 控制侧边栏激活状态
    '$route': {
      handler (to, from) {
        let toPath = to.path
        let indexArr = toPath.lastIndexOf('/') + 1
        this.active = toPath.substr(indexArr)
      },
      immediate: true
    }
  },

效果同上