hwork-web-component 公共包

顶部渲染：src/layout/components/Navbar.vue

src/permission.js

// 根据权限获取菜单
const initPermission = (router, store) =>{
    router.beforeEach(async (to, from, next) => {
        // 根据权限获取菜单
        result = await getAllMenus({ userCode: meInfo.data.userCode, resrSource: '1',isButton:1})
        result = result.data
        // 菜单数据存入strore
        store.dispatch("n_permission/generateRoutes", result);
    })
})

src/store/modules/n_permission.js

const state = {
    routes: []
}
const mutations = {
    SET_ROUTES: (state, routes) => {
        state.routes = routes
    }
}
const actions = {
    generateRoutes ({ commit }, routes) {
        commit('SET_ROUTES', routes)
    }
}

src/store/getters.js

const npmGetters = {
    // 顶部和侧边选中高亮相关
    headerActiveMenu: state => state.n_sidemenu.headerActiveMenu,

    // 所有的路由
    permission_routes: state => state.n_permission.routes
}
export default npmGetters

侧边栏渲染：src/layout/components/SideMenu/index.vue

<script>
export default {
    computed: {
        ...mapGetters([
            'headerActiveMenu',
        ]),
        leftMenu()  // 侧边栏数据
            const leftmenu = this.permission_routes.filter(
                item => item.resrId == this.headerActiveMenu
            )[0]

            return leftmenu ? leftmenu["children"] : [];
        }
    },
    methods: {
        // 设置顶部选中菜单(headerActive)
        changeMenuState(data, pathname) {
            if(!headerActive){
                if (pathname === '/' || pathname === '') {
                    this.$store.commit("n_sidemenu/SET_HEADER_ACTIVE_MENU", data[0] ? data[0].resrId : '');
                }
            } else {
                this.$store.commit("n_sidemenu/SET_HEADER_ACTIVE_MENU", headerActive);
                sessionStorage.setItem('headerActive', headerActive)
            }
        }
    }
}
</script>