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: ''
                }
            },
            methods: {
                getRouterName() {
                    return (this.route.meta && this.route.meta.pageName) || this.route.path;
                },
                getRouterPath() {
                    let path = this.base + '/' + this.route.path;
                    while (path.indexOf('//') > -1) {
                        path = path.replaceAll('//', '/');
                    }
                    return path;
                },
                toRouterPath() {
                    this.$router.push({ path: this.getRouterPath() });
                }
            },
            template: `<div style="padding-left:30px;">
                    <div style="cursor: pointer;" @click="toRouterPath">{{getRouterName()}} =&gt; ({{getRouterPath()}})</div>
                    <route-item :base="getRouterPath()" :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>