duoji-frontend/src/components/common/the-aside.vue

<template>
    <div class="aside">
        <a-menu
            :selectedKeys="selectedKeys"
            :openKeys.sync="openKeys"
            @click="clickMenu"
            mode="inline"
            theme="light"
            :inline-collapsed="aside_collapsed"
        >
            <template v-for="item in routes">
                <!-- 如果没有子路由 -->
                <a-menu-item :key="item.name" v-if="!item.meta.unfold">
                    <a-icon :type="item.meta.icon" />
                    <span>{{ item.meta.name }}</span>
                </a-menu-item>
                <!-- 存在子路由 -->
                <aside-item :key="item.name" :menuInfo="item" v-else></aside-item>
            </template>
        </a-menu>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "theAside",
    computed: {
        ...mapState(["aside_collapsed", "userInfo"])
    },
    watch: {
        $route() {
            console.log("123");
            this.setRoute();
        }
    },
    data() {
        return {
            selectedKeys: [],
            openKeys: [],
            routes: []
        };
    },
    methods: {
        clickMenu(item) {
            this.$router.push({
                name: item.key
            });
        },
        // 设置路由
        setRoute() {
            let parents = [];
            if (this.userInfo.id) {
                parents = this.$router.options.routes[0].children.filter(
                    ele => {
                        if (
                            this.userInfo.permissionList.some(item => {
                                return (
                                    item.rights === ele.name &&
                                    ele.name.indexOf("personal") < 0
                                );
                            })
                        ) {
                            return ele;
                        }
                    }
                );
                // // 递归权限路由
                let recursionRoute = parents => {
                    for (let i = 0; i < parents.length; i++) {
                        let isAuth = this.userInfo.permissionList.some(item => {
                            return parents[i].name === item.rights;
                        });
                        parents[i].meta.auth = isAuth;
                        parents[i].children &&
                            parents[i].children.length > 0 &&
                            recursionRoute(parents[i].children);
                    }
                };
                recursionRoute(parents);
            } else {
                parents = this.$router.options.routes[0].children.filter(
                    item => {
                        return !item.name.startsWith("center");
                    }
                );
            }
            this.routes = parents;

            this.initialKeys();
        },
        initialKeys() {
            console.log("this.$route.matched", this.$route.matched);
            // 选中
            if (this.$route.matched[1].meta.unfold) {
                if (this.$route.matched.length > 3) {
                    this.selectedKeys = [this.$route.matched[2].name];
                } else {
                    this.selectedKeys = [
                        this.$route.matched[this.$route.matched.length - 1].name
                    ];
                }
            } else {
                this.selectedKeys = [this.$route.matched[1].name];
            }
            console.log("selectedKeys", this.selectedKeys);
            // this.$route.matched[1].meta.unfold ? this.selectedKeys = [this.$route.matched[2].name] : this.selectedKeys = [this.$route.matched[1].name]
            // 展开
            this.$route.matched[1].meta.unfold
                ? this.openKeys.push(this.$route.matched[1].name)
                : (this.openKeys = [""]);

            this.$forceUpdate();
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.setRoute();
        });
    }
};
</script>
<style lang="scss">
.aside {
    height: 100vh;
    color: #fff;
    position: relative;
    box-shadow: 2px 0px 6px 0px rgba(0, 21, 41, 0.35);
    z-index: 1000;
    background-color: #fff;
    .ant-menu-inline {
        width: 256px;
    }
    .ant-menu-inline-collapsed {
        width: 80px;
    }
}
</style>