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: '/'
                }
            },
            computed:{
                path(){
                    let path = this.base +'/'+ this.route.path;
                    path = path.replace('//','/').replace('//','/').replace('//','/').replace('//','/');
                    return path;
                }
            },
            template:
                `
<div style="padding-left:20px;">
    <div @click="$router.push({path:path})">{{route.meta && route.meta.pageName || route.path}} ({{path}})</div>
    <route-item :base="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>