Solve the problem that the background color refresh disappears when the Element ui navigation bar is selected

Element ui navigation bar select background color refresh disappears

&lt;el-menu
        :is-collapse="isCollapse"
        text-color="#fff"
        active-text-color="#fff"
        :default-active="activerouter"
        :router="true"
      &gt;
&lt;/el-menu&gt;
 //The point is:default-active="activerouter"Settings

Hang in data

data() {
    return:activerouter;
}

mounted() {
     =  
   //Under normal circumstances, this sentence can be solved. If it cannot be solved, continue reading.  },

2. Add a click event to menuItem, and the routing address is used as a parameter

<el-menu-item
            :index=""
            class="active_bg"
            :class="{ active_bg: index == activeIndex }"
            @click="selectMenuItem()"
          >
</el-menu-item>

3. Save the obtained route address locally

selectMenuItem(path) {
       = path
      ("activerouter", path);
    },

4. Note that the mounted() is written as follows, so don’t use it again.

mounted() {
    //Get the route in the address bar and set the navigation bar selection status in elementui     =  ("activerouter");
    ('activerouter',)
  },

Select Highlight in the Element ui navigation bar, and select Disappear after refreshing

Side menu

After selecting the navigation bar, refreshing the page will find that the selected navigation bar highlights have disappeared, or jumped to other options. The idea here is to define the method, store the route into sessionStorage, and get it from sessionStorage when the page is reloaded.

&lt;!--Side menu--&gt;
         &lt;el-menu :default-active="active" class="el-menu-vertical-demo" router&gt;
            &lt;router-link to="/user" style="text-decoration: none"&gt;
              &lt;el-menu-item index="/user" v-if="isflag" @click="selectMenuItem('/user')"&gt; 
                &lt;el-icon&gt;&lt;User /&gt;&lt;/el-icon&gt;
                &lt;span&gt;User Information&lt;/span&gt;
              &lt;/el-menu-item&gt;
            &lt;/router-link&gt;
            &lt;el-menu-item index="order" v-if="isflag" @click="selectMenuItem('order')"&gt;
              &lt;el-icon&gt;&lt;Tickets /&gt;&lt;/el-icon&gt;
              &lt;span&gt;Order Management&lt;/span&gt;
            &lt;/el-menu-item&gt;
            &lt;el-menu-item index="manage" v-if="=='op' ? false : true" @click="selectMenuItem('manage')"&gt;
              &lt;el-icon&gt;&lt;Reading /&gt;&lt;/el-icon&gt;
              &lt;span&gt;Task Management&lt;/span&gt;
            &lt;/el-menu-item&gt;
            &lt;el-menu-item index="task" v-if="isflag" @click="selectMenuItem('task')"&gt;
              &lt;el-icon&gt;&lt;Calendar /&gt;&lt;/el-icon&gt;
              &lt;span&gt;Schedule&lt;/span&gt;
            &lt;/el-menu-item&gt;
          &lt;/el-menu&gt;

  data() {
    return {
      active: "/user",
    };
  },

mounted(){
     =  ("activerouter");
  },

  methods: {
    selectMenuItem(path) {
       = path
      ("activerouter", path);
    },
   }

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.