FE_bankTeaching/src/layouts/navbar/index.vue

<template>
    <div>
        <ul class="nav">
            <li v-for="(item,index) in menus" :key="index" :class="{active: active == item.index}" @click="jump(item)">{{item.title}}</li>
        </ul>
    </div>
</template>

<script>
import { mapState,mapActions } from 'vuex'
import addRoutes from '@/libs/route/addRoutes'
import Setting from '@/setting'
import util from '@/libs/util'
export default {
    data() {
        return {
            managerStr: this.$route.query.mg,
            isManager: false,
            active: this.$route.path,
            defaultMenus: [
                {
                    index: '/index/list',
                    title: '首页'
                },{
                    index: '/data/list',
                    title: '数据'
                }
            ],
            managerMenus: [
                {
                    index: '/stat/list',
                    title: '数据统计'
                },{
                    index: '/user/list',
                    title: '用户管理'
                },{
                    index: '/role/list',
                    title: '角色权限'
                }
            ],
            menus: [],
            actives: {}
        };
    },
    computed: {
        ...mapState('auth', [
            'routes'
        ])
    },
    watch: {
        '$route'(to,from) {
            let actives = this.actives
            for(let i in this.actives){
                if(actives[i].includes(this.$route.name)) this.active = `/${i}/list`
            }
            this.active = this.$route.path
        }
    },
    mounted() {
        if(util.local.get(Setting.tokenKey)){
            this.getPer()
            if(this.managerStr && atob(decodeURI(this.managerStr)) === 'true'){
                this.isManager = true
                this.setManager(false)
            }
        }
    },
    methods: {
        ...mapActions('user', [
            'setManager'
        ]),
        initMenu(){
            if(this.isManager){
                this.defaultMenus = this.managerMenus
                if(Setting.dynamicRoute){
                    let routes = this.routes
                    let menus = []
                    this.defaultMenus.map(e => {
                        routes.find(n => n.name == e.index) && menus.push(e)
                    })
                    this.menus = menus
                }else{
                    this.menus = this.defaultMenus
                }
            }else{
                this.menus = this.defaultMenus
            }
        },
        jump(item){
            this.active = item.index
            this.$router.push(item.index).catch(err => {})
        },
        getPer(){
            this.$post(this.api.getPermissions).then(res => {
                let routes = res.permissions[0].children
                Setting.dynamicRoute && addRoutes(routes)
                this.initMenu()
            }).catch(err => {})
        },
    }
};
</script>

<style lang="scss" scoped>
    .nav{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        padding-bottom: 10px;
        li{
            padding: 25px;
            font-size: 16px;
            color: #0d0d0d;
            cursor: pointer;
            &.active{
                color: #fff;
                background-color: #568df2;
            }
        }
    }
</style>