导航逻辑修改

whychdw

2019-07-22 51c1ddd948c2c368376cea0d34791df9a33e27b3

导航逻辑修改

 src/App.vue

@@ -11,9 +11,9 @@
                  </ul>
                </div>
            </Header>
            <main-menu></main-menu>
            <Content class="page-content">
              <main-menu></main-menu>
              <div class="page-main-menu">456</div>
              <router-view></router-view>
            </Content>
        </Layout>
    </div>
@@ -65,7 +65,8 @@
  }
  .ivu-layout-content.page-content {
    margin-top: 2px;
    height: calc(100vh - 63px);
    height: calc(100vh - 171px);
    overflow-y: auto;
    background: -webkit-linear-gradient(#FFFFFF, #BCCDEA); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#FFFFFF, #BCCDEA); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#FFFFFF, #BCCDEA); /* Firefox 3.6 - 15 */

 src/components/MainMenu.vue

@@ -17,12 +17,12 @@
                :class="{'show-this':menu.subShow, 'show-this-hover':menu.subShowHover}">
                <ul>
                    <li v-for="(children, sKey) in menu.childrens" :key="sKey">
                        <a 
                            :href="children.url" 
                        <router-link
                            :to="children.url" 
                            :class="{active: children.active}"
                            @click="subClick(key, sKey)">
                            @click.native="subClick(key, sKey)">
                            {{children.txt}}
                        </a>
                        </router-link>
                    </li>
                </ul>
            </div>
@@ -48,12 +48,12 @@
                    childrens: [
                        {
                            txt: '状态信息',
                            url: '#',
                            url: '/home/state',
                            active: true
                        },
                        {
                            txt: '账户信息',
                            url: '#',
                            url: '/home/account',
                            active: false
                        },
                        {
@@ -251,7 +251,31 @@
            menu.subShow = true;
            menu.active = true;
            children.active = true;
        },
        setMenuState: function(path) {
            var key = 0;
            var skey = 0;
            // 遍历menu的值
            for(var i=0; i<this.menus.length; i++) {
                var menu = this.menus[i];
                var childrens = menu.childrens;
                for(var k=0; k<childrens.length; k++){
                    var children = childrens[k];
                    if(children.url != '#' && children.url == path) {
                        key = i;
                        skey = k;
                    }
                }
            }

            this.subClick(key, skey);
        }
    },
    mounted: function() {
        var path = this.$route.path;
        var store = this.$store;
        // 根据路由设置导航状态
        this.setMenuState(store.state.path);
    }
}
</script>

 src/images/machine.png

 src/main.js

@@ -2,6 +2,7 @@
import iView from 'iview';
import VueRouter from 'vue-router';
import Routers from './router';
import store from './store';
import Util from './libs/util';
import App from './App.vue';
import 'iview/dist/styles/iview.css';
@@ -18,14 +19,16 @@
};
const router = new VueRouter(RouterConfig);

// 进入路由前
router.beforeEach((to, from, next) => {
    iView.LoadingBar.start();
    // console.log(to.meta);
    store.commit('setPath', to.path);
    Util.title(to.meta.title);
    next();
    
});

// 进入路由页面后
router.afterEach((to, from, next) => {
    iView.LoadingBar.finish();
    window.scrollTo(0, 0);
@@ -34,5 +37,6 @@
new Vue({
    el: '#app',
    router: router,
    store: store,
    render: h => h(App)
});

 src/router.js

@@ -1,2 +1,33 @@
const routers = [];
const routers = [
    {
        path: '/',
        meta: {
            title: ''
        },
        redirect: '/home/state'
    },
    {
        path: '/home',
        meta: {
            title: ''
        },
        component: (resolve) => require(['./views/home/index.vue'], resolve),
        children:[
            {
                path: 'state',
                meta: {
                    title: '状态显示'
                },
                component: (resolve) => require(['./views/home/state.vue'], resolve)
            },
            {
                path: 'account',
                meta: {
                    title: '状态显示'
                },
                component: (resolve) => require(['./views/home/account-info.vue'], resolve)
            }
        ]
    }
];
export default routers;

 src/store/index.js

New file
@@ -0,0 +1,20 @@
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        path: '/'
    },
    mutations: {
        setPath: function(state, path) {
            state.path = path;
        }
    },
    getters: {
        
    }
});

export default store;

 src/views/home/account-info.vue

New file
@@ -0,0 +1,10 @@
<template>
    <div class="layout">
        <h1>账户信息</h1>
    </div>
</template>
<script>
export default {
    
}
</script>

 src/views/home/index.vue

New file
@@ -0,0 +1,10 @@
<template>
    <div class="home">
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    
}
</script>

 src/views/home/state.vue

New file
@@ -0,0 +1,41 @@
<template>
    <div class="layout">
        <Row>
            <Col span="6">
                <div class="machine-item">
                    <img src="../../images/machine.png">
                </div>
            </Col>
            <Col span="6">
                <div class="machine-item">
                    <img src="../../images/machine.png">
                </div>
            </Col>
            <Col span="6">
                <div class="machine-item">
                    <img src="../../images/machine.png">
                </div>
            </Col>
            <Col span="6">
                <div class="machine-item">
                    <img src="../../images/machine.png">
                </div>
            </Col>
        </Row>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>
    .machine-item {
        text-align: center;
    }
    .machine-item img {
        width: auto;
        height: 500px;
        margin-top: 80px;
    }
</style>