解决点击侧边框菜单刷新回退出错问题

发现问题

先在 router-view的使用方法 这篇博客中完成router-view的点击跳转,之后会发现一个bug:

如果你点击 刷新 或者 回退 , router-view 中的页面会原地刷新，但侧边的菜单栏会再次回到 默认 状态,恢复到设置的默认的menuitem点击高亮状态中,就出现了menuitem和右侧的router-view对应出错的问题。

问题探究

经过研究menu的代码可知,由于给menu设置了默认的点击menuitem,所以每次刷新menu都会重新回到默认的menuitem点击状态中,而右侧的router-view又不变，所以就出现了对应出错的问题。

解决思路

在menu组件中取消默认的menuitem,在首页 index.vue 中以监听router-view当前的url,从而让menu中的menuitem有选择性的变成高亮点击状态。这样每次进入页面时只要页面不变,menuitem也不会变.

解决步骤

在首页 index.vue中添加 watch 监听,添加 judgeUrl 函数并在 mounted() 中运行.

<template>
  <div style="background-color:#F5F7F9;height:100%;display:flex">
    <!-- 侧面菜单 -->
    <Menu
      v-on:address="getAddress"
      :selectProp="selectItem"
    ></Menu>
    <router-view></router-view>
  </div>
</template>

<script>
import Menu from '../components/menu'
export default {
  components: {
    Menu,
  },
  data() {
    return {
      selectItem: undefined,
    }
  },
  // 监听,当路由发生变化的时候执行
  watch: {
    $route(to, from) {
      if (to.path == '/') {
        this.selectItem = ['1']
      } else if (to.path == '/a') {
        this.selectItem = ['2']
      } else if (to.path == '/b') {
        this.selectItem = ['3']
      } else if (to.path == '/c') {
        this.selectItem = ['1']
      }
    },
  },
  methods: {
    //页面跳转
    jumpPage(value) {
      this.$router.push(value)
    },
    getAddress(value) {
      this.jumpPage(value)
    },

    // 以当前页面的router的路径判断处于哪一个页面,并将对应的值赋值给菜单menu让其显示被点击的效果
    judgeUrl(to) {
      console.log(to)
      if (to.path == '/') {
        this.selectItem = ['1']
      } else if (to.path == '/b') {
        this.selectItem = ['2']
      } else if (to.path == '/c') {
        this.selectItem = ['3']
      } else if (to.path == '/a') {
        this.selectItem = ['1']
      }
    },
  },
  created() {},
  mounted() {
    // 刷新时触发该函数,判断处于哪一个页面就将对应的值赋值给菜单
    this.judgeUrl(this.$router.currentRoute)
  },
}
</script>

<style lang="scss" scoped></style>

在menu中取消默认的menuitem,用selectedKeys(此处的menu属于 ant-design vue 框架)属性获取所点击高亮的menuitem,selectedKeys默认为 undefined防止刷新时自动默认选择menuitem高亮,同时watch监听传来的应高亮的menuitem数值并在其发生变化时重新赋值以再次渲染显示层.

<template>
  <a-menu
    mode="inline"
    theme="dark"
    :selectedKeys="select"
    style="height: 100%;display:flex;flex-direction:column"
    id="domMenu"
    @click="deliverAddress"
  >
    <a-menu-item-group key="g1" style="flex:1">
      <!-- 菜单项A -->
      <a-menu-item key="1" style="text-align:center;margin-top:0">
        <span>菜单项A</span>
      </a-menu-item>

      <!-- 菜单项B -->
      <a-menu-item key="2" style="text-align:center">
        <span>菜单项B</span>
      </a-menu-item>

      <!-- 菜单项C -->
      <a-menu-item key="3" style="text-align:center">
        <span>菜单项C</span>
      </a-menu-item>
    </a-menu-item-group>
  </a-menu>
</template>

<script>
export default {
  props: {
    idDivProp: {
      type: String,
      default: () => {
        return ''
      },
    },
    selectProp: {
      type: Array,
      default: () => {
        return ['']
      },
    },
  },
  watch: {
    selectProp(value) {
      this.select = value
    },
  },
  data() {
    return {
      select: this.selectProp,
    }
  },
  methods: {

    // 传递地址字符串
    deliverAddress(value) {
      //   console.log(this.select)
      let key = value.key
      switch (key) {
        case '1': //点击a
          this.$emit('address', 'a')
          break

        case '2': //点击b
          this.$emit('address', 'b')
          break

        case '3': //点击c
          this.$emit('address', 'c')
          break

        default:
          break
      }
    },
  },
}
</script>

<style lang="scss" scoped>
</style>

最后

问题解决

__EOF__

本文作者：damarkday知识库
本文链接：https://www.cnblogs.com/GoodMemoryBlog/p/14333087.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！