vue 左侧菜单出现重复菜单问题怎么解决？ 有遇到过这样的问题吗？

Question

默认第一次登录进来 左侧菜单显示正常，退出 重新登录 菜单就会重复，退一次登录一次 菜单就加载一次
import { asyncRoutes, constantRoutes } from '@/router'
import { getModules } from '@/api/admin'

import Layout from '@/layout'
/**

• Use meta.role to determine if the current user has permission
• @param roles
• @param route

*/
function hasPermission(roles, route) {
if (route.meta && route.meta.roles) {

return roles.some(role => route.meta.roles.includes(role))

} else {

return true

}
}

///////

export function generaMenu(routes, data) {
let agencyArr = [

{
  path: 'agency/addAgency',
  name: 'addAgency',
  component: () => import('@/views/agency/addAgency'),
  meta: { title: '添加机构' },
  module_name: '添加机构',
  hidden: true
},
{
  path: 'agency/editAgency',
  name: 'editAgency',
  component: () => import('@/views/agency/editAgency'),
  meta: { title: '编辑机构' },
  module_name: '编辑机构',
  hidden: true
},
{
  path: 'agency/operatorList',
  name: 'operatorList',
  component: () => import('@/views/agency/operatorList'),
  meta: { title: '操作员', icon: 'tree' },
  module_name: '操作员',
  hidden: true
},
{
  path: 'agency/salesmanList',
  name: 'salesmanList',
  component: () => import('@/views/agency/salesmanList'),
  meta: { title: '业务员', icon: 'tree' },
  module_name: '业务员',
  hidden: true
}

]
let financialArr = [

{
  path: 'financial/developOrgin',
  name: 'developOrgin',
  component: () => import('@/views/financial/developOrgin'),
  meta: { title: '直接发展机构', icon: 'tree' },
  module_name: '直接发展机构',
  hidden: true
},
{
  path: 'financial/developShop',
  name: 'developShop',
  component: () => import('@/views/financial/developShop'),
  meta: { title: '直接发展商家', icon: 'tree' },
  module_name: '直接发展商家',
  hidden: true
}

]
let businessArr = [

{
  path: 'business/addBusiness',
  name: 'addBusiness',
  component: () => import('@/views/business/addBusiness'),
  meta: { title: '添加商家', icon: 'tree' },
  module_name: '添加商家',
  hidden: true
},
{
  path: 'business/editBusiness',
  name: 'editBusiness',
  component: () => import('@/views/business/editBusiness'),
  meta: { title: '编辑商家', icon: 'tree' },
  module_name: '编辑商家',
  hidden: true
}

]
data.forEach(item => {

// alert(JSON.stringify(item))
if (item.name == 'agency') {
  item.child = item.child.concat(agencyArr)
}
if (item.name == 'financial') {
  item.child = item.child.concat(financialArr)
}
if (item.name == 'business') {
  item.child = item.child.concat(businessArr)
}
const menu = {
  path: item.path == '#' ? '/' + item.name : item.name,
  component:
    item.path == '#' ? Layout : () => import(`@/views/${item.path}`),
  children: [],
  name: item.name,
  meta: {
    title: item.module_name,
    id: item.id
  },
  hidden: item.hidden
}

if (item.child) {
  generaMenu(menu.children, item.child)
}
routes.push(menu)

})
}

///////

/**

• Filter asynchronous routing tables by recursion
• @param routes asyncRoutes
• @param roles

*/
export function filterAsyncRoutes(routes, roles) {
const res = []

routes.forEach(route => {

const tmp = { ...route }
if (hasPermission(roles, tmp)) {
  if (tmp.children) {
    tmp.children = filterAsyncRoutes(tmp.children, roles)
  }
  res.push(tmp)
}

})

return res
}

const state = {
routes: [],
addRoutes: []
}

const mutations = {
SET_ROUTES: (state, routes) => {

state.addRoutes = routes
state.routes = constantRoutes.concat(routes)

}
}

// const actions = {
// generateRoutes({ commit }, roles) {
// return new Promise(resolve => {
// let accessedRoutes
// // if (roles.includes('admin')) {
// // accessedRoutes = asyncRoutes || []
// // } else {
// // accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
// // }
// accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)

// commit('SET_ROUTES', accessedRoutes)
// resolve(accessedRoutes)
// })
// }
// }

//////
const actions = {
generateRoutes({ commit }, roles) {

return new Promise(resolve => {
  let loadMenuData = []
  // 先查询后台并返回左侧菜单数据并把数据添加到路由
  getModules({ role_id: localStorage.getItem('role_id') })
    .then(response => {
      let data = response
      if (response.status !== 200) {
        // this.$message({
        //     message: '菜单数据加载异常',
        //     type: 0
        // })
        console.log('error')
      } else {
        data = response.data
        Object.assign(loadMenuData, data)
        console.log()
        console.log(asyncRoutes)
        generaMenu(asyncRoutes, loadMenuData)
        let accessedRoutes
        // if (roles.includes('admin')) {
        //     // alert(JSON.stringify(asyncRoutes))
        //     accessedRoutes = asyncRoutes || []
        // } else {
        //     accessedRoutes = filterAsyncRoutes(
        //         asyncRoutes,
        //         roles
        //     )
        // }

        if (roles.includes('orgin')) {
          accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
        }

        commit('SET_ROUTES', accessedRoutes)
        resolve(accessedRoutes)
      }
      // generaMenu(asyncRoutes, data)
    })
    .catch(error => {
      console.log(error)
    })
})

}
}

//////
export default {
namespaced: true,
state,
mutations,
actions
}

==========
<script>
export default {
name: "MenuItem",
functional: true,
props: {

icon: {
  type: String,
  default: ""
},
title: {
  type: String,
  default: ""
}

},

render(h, context) {

const { icon, title } = context.props;
const vnodes = [];

if (icon) {
  // console.log(icon);
  // vnodes.push(<svg-icon icon-class={icon}/>)
  vnodes.push(<i class={"iconStyle iconfont " + icon} />);
}

if (title) {
  vnodes.push(
    <span class="left-mar" slot="title">
      {title}
    </span>
  );
}
return vnodes;

}
};
</script>
<style>
.iconStyle {
font-size: 17px !important;
color: rgb(191, 203, 217) !important;
}
.left-mar {
margin-left: 10px;
}
.hideSidebar .left-mar {
margin-left: 0;
}

.menuitem .iconStyle {
color: rgb(31, 107, 194) !important;
}
</style>

Answer 1

那就每次请求前赋值为空数组

Answer 2

对啊 赋值前清空一次