【vue】vue+elementUI+seajsベースのバックグラウンド管理外フレームdemo、ナビゲーションメニュー+tabページ表示ジャンプ

バックグラウンド管理外フレームワークdemoは、vue+seajsアーキテクチャのバックグラウンド管理フレームワークであり、ページの主な3つの部分から構成されています.ヘッダー、左側のメニュー、メインインタフェースです.左側のメニューは、ルーティング制御でメインインタフェースにtabページ形式で表示されます.seajsは主にコード組織に用いられ,モジュール化ロードを容易にする.機能的な実装は主にvue+elementUI+vuexである.
左側のナビゲーション(app-navコンポーネントのカスタマイズ)
フレームワーク全体はelementUIを用いてインタフェースを実現し,ナビゲーションは左側メニューコンポーネント−NavMenuナビゲーションメニューを用いて左側メニューナビゲーションを個別に1つのコンポーネントにした.

//default-active         。  router   vue-router    ，              index    path       
    
    //index     path
        
            {
     {menu.name}}
        
        
            
             {
     {item.name}}
        
    



//       ，      ，      
//route      ，name        ，children           。
data() {
    return {
        menus: [
            { route: '/', name: '  ' , children:false},
            { route: '/user', name: '    ' , children:false},
            { route: '/psd', name: '    ' , children:false},
            { route: '/salary', name: '    ' , children:false},
            { route: '/attendence', name: '    ' , children:false},
            { route: '/perform', name: '    ', children: [{ route: '/month', name: '    ' }, { route: '/year', name: '    ' }] },
            { route: '/admin', name: '    ' , children:false},
            { route: '/feedback', name: '    ' , children:false}
        ]
    }
},

ルーティングは、上のコンポーネントに表示されているものに対応する必要があります.そうしないと、ジャンプしません.

 const router = new VueRouter({
    routes: [
        {
            path: '/',
            name: '  ',
            component: main,
            children: [
                {
                    path: '/user',
                    name: '    ',
                    component: ElementTable,
                },
                {
                    path: '/userInfo/:id',
                    name: '     ',
                    component: DetailInfo
                },
                {
                    path: '/psd',
                    name: '    ',
                    component: Template
                },
                {
                    path: '/salary',
                    name: '    ',
                    component: Template
                },
                {
                    path: '/attendence',
                    name: '    ',
                    component: Template
                },
                {
                    path: '/perform',
                    name: '    ',
                    component: Template,
                    children:[
                        {
                            path: '/month',
                            name: '    ',
                            component: Monthform
                        },
                        {
                            path:'/year',
                            name: '    ',
                            component: Theform
                        }
                    ]
                },
                {
                    path: '/admin',
                    name: '    ',
                    component: Template
                },
                {
                    path: '/feedback',
                    name: '    ',
                    component: Template
                }
            ]
        },
        {
            path: '*',
            redirect: '/'
        }
    ]
});

以上,メニュー項目ページをクリックして対応するルーティングページにジャンプすることを実現した.
ルーティングジャンプ表示tabページ(mainフレームワークコンポーネント)
フレームワークコンポーネントでは、watchを使用してページルーティングの変更(すなわち、メニュー操作をクリック)を傍受し、新しいルーティングにtabページを追加し、開いたルーティングをクリックすると対応するtabページにジャンプします.

 watch: {
    '$route'(to) {
            let flag = false;//                  tab 
            //options           tab 
            for (let option of this.options) {
            //     ，         tab    active      
                if (option.name === to.name) {
                    flag = true;
                    this.$store.commit('set_active_index', '/' + to.path.split('/')[1]);
                    break;
                }
            }
            //     ，   tab ，     tab    active       
            if (!flag) {
                this.$store.commit('add_tabs', { route: '/' + to.path.split('/')[1], name: to.name });
                this.$store.commit('set_active_index', '/' + to.path.split('/')[1]);
            }

    }
}

フレームコンポーネントのhtmlを見て、メニューコンポーネントapp-navを導入し、メインインタフェースはtabバーです.elementUIのtabコンポーネントを使用して、activeIndexをバインドしてtabページをアクティブにするためにデスクトップのフロントエンドに表示し、forループoptionsを使用して開いているtabページをすべて表示します.

2つの主要関数をバインドします.

tabClick----tabラベルをクリックしてデスクトップの一番前にアクティブに表示します.

tabRemove---tabラベルの閉じるボタンをクリックし、現在のtabページを閉じてoptionsから削除します.対応する関数は、

です.

methods: {
    // tab   ，       
    tabClick(tab) {
        let path = this.activeIndex;
        //         ，       ，           
        if (this.activeIndex === '/userInfo') {
            path = this.activeIndex + '/' + this.$store.state.userInfo.name;
        }
        this.$router.push({ path: path });//    
    },
    tabRemove(targetName) {
        //       
        if (targetName == '/') {
            return;
        }
        //  tab options   
        this.$store.commit('delete_tabs', targetName);
        
        //                            ，    tab     tab
        if (this.activeIndex === targetName) {
            //          
            if (this.options && this.options.length >= 1) {
                this.$store.commit('set_active_index', this.options[this.options.length - 1].route);
                this.$router.push({ path: this.activeIndex });
            } else {
                this.$router.push({ path: '/' });
            }
        }
    }
},
computed: {
    options() {
        return this.$store.state.options;
    },
    //            tab 
    activeIndex: {
        get() {
            return this.$store.state.activeIndex;
        },
        set(val) {
            this.$store.commit('set_active_index', val);
        }
    }
}

上記の論理ではvuexを用いてtabデータを格納し,optionsは配列を維持し,開いたtabページを格納し,activeIndexは現在アクティブなtabページを保存する.

add_tabs:新しいtabページを追加し、options配列に新しいデータを追加します.

delete_tabs:tabページを閉じ、options配列から削除します.

set_active_index:現在アクティブなtabを設定します.

/**
 * Vuex      
 * @param options {Array}     tabs   
 */
const store = new Vuex.Store({
    state: {
        options: [],
        activeIndex: '/user'
    },
    mutations: {
        //   tabs
        add_tabs(state, data) {
            this.state.options.push(data);
        },
        //   tabs
        delete_tabs(state, route) {
            let index = 0;
            for (let option of state.options) {
                if (option.route === route) {
                    break;
                }
                index++;
            }
            this.state.options.splice(index, 1);
        },
        //        tab
        set_active_index(state, index) {
            this.state.activeIndex = index;
        },
    }
});

コード#コード#
ソースリンク
転載先:https://www.cnblogs.com/qiuyueding/p/9773850.html