image.png

router->index.js中的如下代码

import Vue from 'vue'
import store from '../store'
import VueRouter from 'vue-router'
Vue.use(VueRouter)


// 主入口
import MainPage from '../views/MainPage.vue';
import Dad from '../views/Dad.vue';
import ChannelList from '../views/channelList.vue';
import ChannelOrder from '../views/channelOrder.vue';
import YearCardManage from '../views/yearCardManage.vue';
const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/mainPage',
    component: MainPage,
    redirect: '/channelOrder',
    children: [
      {
        path: '/channelManage',
        meta: {title: '渠道商管理'},
        redirect: '/channelList',
        component: Dad,
        children: [
          {
            path: '/channelList',
            name:'channelList',
            meta: {title: '渠道商列表'},
            component:ChannelList
          },
          {
            path: '/channelOrder',
            name:'channelOrder',
            meta: {title: '渠道商订单'},
            component: ChannelOrder
          },
        ],
      },
      {
        path: '/yearCardManage',
        name:"yearCardManage",
        meta: {title: '年卡管理'},
        component: YearCardManage
      }
    ]
  },
]
const router = new VueRouter({
  routes: routes
})
// 挂载路由导航守卫。每进入到一个页面就会调用
router.beforeEach((to, from, next) => {

  console.log('xixixixhhhhhh---to',to,'----from---',from);
  if (to.path === '/login') {
    const cbUserName = window.localStorage.getItem("cbUserName");
    if (!cbUserName) {
      return next()// 没有用户名，去登录页面
    }else{
      return next('/mainPage')// 您已登录，去首页吧
    }
  }else{
    const cbUserId = store.state.cbUserId;
    if(!cbUserId ){
      return next('/login')
    }
    // 将本次访问的目的路径存入缓存。
    window.localStorage.setItem("activeLink", to.path);
  }
  next()
})


export default router

MainPage.vue中的如下代码

<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider
      :trigger="null"
      collapsible
      :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }"
    >
      <div style="height:20px;"></div>

      <a-menu theme="dark" mode="inline" :selectedKeys="selectedKeys">
        <template v-for="item in menuList">
          <!-- 二级类型的 -->
          <a-sub-menu v-if="item.child" :key="item.path">
            <div slot="title" style="display:flex;">
              <span :class="item.icons" style="display:flex;margin-right:13px;">
              </span>
              <span>{{ item.title }}</span>
            </div>
            <a-menu-item
              v-for="item2 in item.child"
              :key="item2.path"
              style="margin-left:4px;"
            >
              {{ item2.title }}
              <router-link :to="item2.path"> </router-link>
            </a-menu-item>
          </a-sub-menu>
          <!-- 一级类型的 -->
          <a-menu-item v-else :key="item.path">
            <span :class="item.icons" style="margin-right:10px;"></span>
            <span class="nav-text">{{ item.title }}</span>
            <router-link :to="item.path"> </router-link>
          </a-menu-item>
        </template>
      </a-menu>
    </a-layout-sider>
  </a-layout>
</template>
<script>
export default {
  data() {
    return {
      selectedKeys: [],
      menuList: [
        {
          title: "年卡管理",
          path: "/yearCardManage",
          icons: "iconfont icon-jingying",
          child: null
        },
        {
          title: "渠道商管理",
          path: "/channelManage",
          icons: "iconfont icon-qudao",
          child: [
            {
              title: "渠道商列表",
              path: "/channelList",
              icons: null,

              child: null
            },
            {
              title: "渠道商订单",
              path: "/channelOrder",
              icons: null,
              child: null
            }
          ]
        }
      ]
    };
  },
  watch: {
    // 监听路由变化。每次点击菜单就会调用。
    $route(to, from) {
      // 将目的路径赋值给selectedKeys，实现选中当前菜单
      this.selectedKeys = to.path.split(",");
    }
  },
  mounted() {
    // 刷新页面就会调用，获取上次存入的菜单
    var link = window.localStorage.getItem("activeLink");
    // 选中菜单
    this.selectedKeys = link.split(",");
  }
};
</script>

由以上代码分析，首先得知道router.beforeEach((to, from, next) => { })和$route(to,from) {}的异同：

• 相同点：
  参数to和from打印的内容是一样的。
• 不同点：
  由于两个函数分别在不同的文件中，决定了分别有不同的作用。
  前者作用：跳转到任何一个页面都会走该函数，该函数和菜单标签不在一个页面，因此在该函数将目的路径存入缓存最合适。
  后者作用：点击每个菜单都会走该函数。因为该函数和菜单标签在同一文件，因此将目的路径赋值给菜单变量即可，不用存入缓存，当做临时变量使用。

• 
  1、router->index.js文件中的router.beforeEach((to, from, next) => { })函数里面写入window.localStorage.setItem("activeLink", to.path);实现存入缓存
  2、MainPage.vue中的mounted() {}函数里面写入var link = window.localStorage.getItem("activeLink"); this.selectedKeys = link.split(",");实现获取上次的菜单并选中。

• 
  MainPage.vue中写入如下代码即可：

watch: {
    // 监听路由变化。每次点击菜单就会调用。
    $route(to, from) {
      // 将目的路径赋值给selectedKeys，实现选中当前菜单
      this.selectedKeys = to.path.split(",");
    }
  },

注意点：a-menu-item中的:key="item.path"很重要。<a-menu> 中的:selectedKeys="selectedKeys"就是根据这个:key对应的值来实现选中某个item的，同时要保证item.path值的唯一性。当然你也可以取item.aa、item.bb，只需要保证aa、bb有值且唯一就行。