Vue全家桶多级嵌套

模块安装

$ npm install vue vue-router vuex axios -S

目录结构

src
  ├─ pages
  |  ├─ VehicleManage
  |  |  ├─ VehicleRegisterForm
  |  |  |  ├─ BaseInfo
  |  |  |  |  └─ index.vue
  |  |  |  └─ index.vue
  |  └─ └─ index.vue
  ├─ router
  |  ├─ vehicleManage
  |  |  ├─ vehicleRegisterForm
  |  |  |  └─ index.js
  |  |  └─ index.js
  |  └─ index.js
  ├─ store
  |  ├─ vehicleManage
  |  |  ├─ vehicleRegisterForm
  |  |  |  └─ index.js
  |  |  └─ index.js
  |  └─ index.js
  ├─ App.vue
  └─ main.js

main.js

import Vue from 'vue';
import router from './router';
import store from './store';
import axios from 'axios';

import App from './App.vue';

Vue.config.productionTip = false;

Vue.prototype.$axios = axios;

new Vue({
    router,
    store,
    render: h => h(App),
}).$mount('#app')

App.vue

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    name: 'App'
}
</script>

路由

router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import vehicleManage from './vehicleManage/index';

Vue.use(Router);

export default new Router({
    mode: 'hash',
    routes: [
        {
            path: '/',
            name: 'Home',
            redirect: 'vehicleManage/vehicleRegisterForm/baseInfo'
        },
        // 车辆管理
        vehicleManage
    ]
});

router/vehicleManage/index.js

/* 车辆管理 */
import VehicleManage from '@/pages/VehicleManage';
// 车辆登录表
import VehicleRegisterForm from './vehicleRegisterForm/index';

export default {
    path: '/vehicleManage',
    name: 'vehicleManage',
    component: VehicleManage,
    children: [
        VehicleRegisterForm
    ]
}

router/vehicleManage/vehicleRegisterForm/index.js

/* 车辆登记表 */
import VehicleRegisterForm from '@/pages/VehicleManage/VehicleRegisterForm';
// 基本信息
import BaseInfo from '@/pages/VehicleManage/VehicleRegisterForm/BaseInfo';

export default {
    path: 'vehicleRegisterForm',
    name: 'vehicleRegisterForm',
    component: VehicleRegisterForm,
    children: [
        {
            path: 'baseInfo',
            name: 'baseInfo',
            component: BaseInfo
        }
    ]
}

Vuex Store

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import vehicleManage from './vehicleManage/index';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        msg: 'aaa'
    },
    mutations: {

    },
    actions: {

    },
    modules: {
        vehicleManage
    }
})

store/vehicleManage/index.js

import vehicleRegisterForm from './vehicleRegisterForm/index';
export default {
    namespaced: true,
    state: {
        msg: 'bbb'
    },
    getter: {

    },
    mutations: {

    },
    actions: {

    },
    modules: {
        vehicleRegisterForm
    }
}

store/vehicleManage/vehicleRegisterForm/index.js

export default {
    namespaced: true,
    state: {
        msg: 'ccc'
    },
    getter: {

    },
    mutations: {

    },
    actions: {

    }
}

页面

pages/VehicleManage/index.vue

<template>
    <router-view></router-view>
</template>
<script>
export default {
    name: 'VehicleManage'
}
</script>

pages/VehicleManage/VehicleRegisterForm/index.vue

<template>
    <router-view></router-view>
</template>
<script>
export default {
    name: 'VehicleRegisterForm'
}
</script>

pages/VehicleManage/VehicleRegisterForm/BaseInfo/index.vue

<template>
    <div>
        hello world ~
    </div>
</template>
<script>
import {mapState} from 'vuex';
export default {
    name: 'BaseInfo',
    data() {
        return {
            // ...
        }
    },
    computed: {
        ...mapState([
            'msg'
        ]),
        ...mapState('vehicleManage', {
            msg2: (state) => {
                return state.msg;
            }
        }),
        ...mapState('vehicleManage/vehicleRegisterForm', {
            msg3: (state) => {
                return state.msg;
            }
        })
    },
    mounted() {
        console.log(this.msg, this.msg2,this.msg3); // aaa bbb ccc
    }
}
</script>