routerMap.vue

<style lang="less" scoped>
.page-map {
    color: #333; 
}
</style>
<template>
    <div class="page-map">
        <route-item :route="item" v-for="(item,index) in list" :key="index"></route-item>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';

export default {
    mixins: [],
    components: {
        'route-item': {
            name: 'route-item',
            props: {
                route: {
                    type: Object,
                    default() {
                        return {};
                    }
                },
                base: {
                    type: String,
                    default: ''
                }
            },
            template:
                '<div style="padding-left:20px;"><div @click="$router.push({path:base + route.path})">{{route.meta && route.meta.pageName || route.path}}({{base + route.path}})</div><route-item :base="base + route.path" :route="item" v-for="(item,index) in route.children" :key="index"></route-item></div>'
        }
    },
    props: [],
    data: function () {
        return {
            list: []
        };
    },
    methods: {
        async init() {
            this.list = this.$router.options.routes;
        }
    },
    watch: {},
    created() {
        this.init();
    },
    mounted() {},
    //计算属性
    computed: {
        ...mapGetters(['vx_userInfo'])
    }
};
</script>