vue刷新页面，让导航菜单选中样式不消失

采用sessionStorage的方式，对路由路径进行存储，再次刷新页面时，获取当前页面的路由路径

html代码

<ul class="menu">
  <li v-for="(menu, index) in menuRouters" :key="index"
      @click="changeMenu(menu)"
      :class="{active : select === menu.path}">{{menu.name}}</li>
</ul>

js代码

data() {
    return {
        // 菜单状态
        select: '/',
        // 菜单数据
        menuRouters: [
            {
                name: '首页',
                path: '/',
            },
            {
                name: '关于我',
                path: '/About',
            },
        ],
    }
},

mounted() {
    this.select = sessionStorage.getItem('select') || '/'
},
methods: {
    /**
     * 切换菜单功能
     * @param {Object} menu 单个菜单信息
     */
    changeMenu(menu) {
          this.select = menu.path
          sessionStorage.setItem('select', this.select)
          this.$router.push({
                path: menu.path,
          })
    },
},

router.js

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
    // 首页
    {
        path: '/',
        component: () => import('@/views/modules/home/Main.vue'),
    },
    // 关于我
    {
        path: '/About',
        component: () => import('@/views/modules/about/Main.vue'),
    },
    ],
})