1

2

3

4

5

6

7

8

9

<el-menu

        :is-collapse="isCollapse"

        text-color="#fff"

        active-text-color="#fff"

        :default-active="activerouter"

        :router="true"

      >

</el-menu>

 //重点在于:default-active="activerouter"的设置

1

2

3

data() {

    return:activerouter;

}

1

2

3

4

mounted() {

    this.activerouter =  window.location.pathname

   //正常情况下加上这句话是可以解决的，如果解决不了，继续往下看

  },

1

2

3

4

5

6

7

<el-menu-item

            :index="subItem.path"

            class="active_bg"

            :class="{ active_bg: index == activeIndex }"

            @click="selectMenuItem(subItem.path)"

          >

</el-menu-item>

1

2

3

4

selectMenuItem(path) {

      this.activerouter = path

      window.sessionStorage.setItem("activerouter", path);

    },

1

2

3

4

5

mounted() {

    //获取地址栏中的路由，设置elementui中的导航栏选中状态

    this.activerouter =  window.sessionStorage.getItem("activerouter");

    console.log('activerouter',this.activerouter)

  },

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!--侧边菜单-->

         <el-menu :default-active="active" class="el-menu-vertical-demo" router>

            <router-link to="/user" style="text-decoration: none">

              <el-menu-item index="/user" v-if="isflag" @click="selectMenuItem('/user')"> 

                <el-icon><User /></el-icon>

                <span>User Information</span>

              </el-menu-item>

            </router-link>

            <el-menu-item index="order" v-if="isflag" @click="selectMenuItem('order')">

              <el-icon><Tickets /></el-icon>

              <span>Order Management</span>

            </el-menu-item>

            <el-menu-item index="manage" v-if="userInfo.rolename=='op' ? false : true" @click="selectMenuItem('manage')">

              <el-icon><Reading /></el-icon>

              <span>Task Management</span>

            </el-menu-item>

            <el-menu-item index="task" v-if="isflag" @click="selectMenuItem('task')">

              <el-icon><Calendar /></el-icon>

              <span>Schedule</span>

            </el-menu-item>

          </el-menu>

1

2

3

4

5

  data() {

    return {

      active: "/user",

    };

  },

1

2

3

mounted(){

    this.active =  window.sessionStorage.getItem("activerouter");

  },

1

2

3

4

5

6

  methods: {

    selectMenuItem(path) {

      this.active = path

      window.sessionStorage.setItem("activerouter", path);

    },

   }