陪诊医疗系统（二）

右上角退出：

权限获取：

通过接口拿到了权限：

根据获得的数据动态设置动态路由：

先拿到数据：

通过glob导入，使得与对应文件夹对应

结果如下：

通过接口返回的路由信息已完成

但是存在store中的数据一刷新就丢失，因此下载持久化插件：

npm i vuex-persistedstate

配置：

这样能处理白屏，但是点击一个选项之后，又会空白，因为其数据属于动态路由的：

动态获取顶部数据：

先打印看看原来的数据：

动态绑定：

然后传值：

效果：

把点击的高亮效果保存下来：

#aside.vue
// 默认选中颜色
const active=computed(()=>store.state.menu.menuActive)


##  :default-active="active"
<el-menu
        :style="{width: !isCollapse ? '230px': '64px'}"
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="aside-container"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :default-active="active"
      >

#menu.js
###  menuActive:'1-1'
const state= localData ? localData.menu:{
  isCollapse:false,
  selectMenu:[],
  routerList:[],
  menuActive:'1-1'
}

updateMenuActive(state, payload){
      state.menuActive=payload
  }

#treeMenu.vue
### store.commit('updateMenuActive',active)
// 点击侧边栏跳转
const handleClick=(item,active) =>{
  // console.log(item);
  store.commit('addMenu',item.meta)
  store.commit('updateMenuActive',active)
  router.push(item.meta.path)
}

效果：

重定向：

#router/index.js

const localData = localStorage.getItem('pz_v3pz')

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { 
      path: '/',
      component: Layout,
      name: 'main',
      redirect:to =>{
        if(localData){
          // 有子菜单情况
          const child=JSON.parse(localData).menu.routerList[0].children
          if(child){
            return child[0].meta.path
          }else{
            return JSON.parse(localData).menu.routerList[0].meta.path
          }
        }else{
          return '/'
        }
      },
........

删除功能：