解决iView Menu 页面刷新时,不选中当前MenuItem的问题

在使用iview Menu时,点击某一个菜单项,刷新页面后,总是选中第一项菜单,但当前路由没有变化,由此可以根据当前路由不会变化来解决这个问题。

<Menu
 ref="menu"
 mode="horizontal"
 theme="light"
 :active-name="active"
>
  <MenuItem
    v-for="item in menuList"
    :key="item.path"
    :name="item.path"
    :to="item.path"
  >
    {{ item.name }}
  </MenuItem>
</Menu>

// data部分
active: '/patientIndex'
menuList: [
  {
    name: '首页',
    path: '/Index',
    index: '1',
  },
  {
    name: '视图1',
    path: '/ViewOne',
    index: '2',
  },
  {
    name: '视图2',
    path: '/ViewTwo',
    index: '3',
  },
  {
    name: '视图3',
    path: '/ViewThree',
    index: '4',
  },
  {
    name: '视图4',
    path: '/ViewFour',
    index: '5',
  },
],

将Menu的active-name指定为当前路由的路径,然后执行以下操作:

created() {
  this.$nextTick(() => {
    this.active = this.$route.path;
    console.log(this.$route, '当前路由信息');
    this.$refs.menu.updateActiveName();
  });
},
// updateActiveName() 是Menu实例的方法,需在$nextTick()中进行调用

如有疑问,可参考官方文档
iView Menu


如有不同意见,或者文章有不当之处,欢迎大家指出!

你可能感兴趣的:(iview,vue,vue,iView,vue.js)