Configuration of navigation bar path (breadcrumb) based on iView UI

cause

The back office management systems of the previous company are all brush out, which have not written the back office management system for a long time. After changing jobs, I will start to make trouble with router. It's useless for a long time. So I'll record some general modules and share them with my friends in need.

after

//router.js
let routes = [
    {
        path: '/',
        redirect: '/admin',
    },
    {
        path: '/login',
        name: 'login',
        meta: {title: 'Sign in'},
        component: () => import('./components/login.vue')
    },
    {
        path: '/admin',
        name: 'admin',
        meta: {title: 'homepage'},
        component: () => import('./components/admin.vue'),
        children: [
            {
                path: 'operation',
                name: 'operation',
                meta: {title: 'operation management'},
                component: () => import('./components/admin/operation.vue')
            },
            {
                path: 'order',
                name: 'order',
                meta: {title: 'Order center'},
                redirect: 'order/index',
                component: () => import('./components/admin/order.vue'),
                children: [
                    {
                        path: 'index',
                        name: 'index',
                        meta: {title: ''},
                        component: () => import('./components/admin/ordercenter.vue')
                    },
                    {
                        path: 'detail',
                        name: 'detail',
                        meta: {title: 'Order details'},
                        component: () => import('./components/admin/orderdetail.vue')
                    },
                ]
            },
        ]
    },
]

export default routes

This is my part of router path configuration table

 /*Breadcrumb path handling*/
    eve_breadcrumbItem_change(){
        var list = this.$route.fullPath.split('/')//list[0]: is a space
        this.BreadcrumbItem = []
        function fn(obj, arr, index,self) {
            if (obj.hasOwnProperty('children')&&obj['children'].length>0) {
                for (let one of obj.children) {
                    if (one.name != 'index' && one.name == arr[index]) {
                        self.BreadcrumbItem.push({'title': one.meta.title, 'path': one.path})
                        return one.hasOwnProperty('children')&&one['children'].length>0?fn(one,arr,index+1,self):false
                    }
                }
            }
        }
        for(let one of this.$router.options.routes){
            if(one.hasOwnProperty('name')&&one.name == list[1]){
                this.BreadcrumbItem.push({'title': one.meta.title, 'path': one.path})
                fn(one,list,2,this)
            }
        }
    }

This is the focus of this article. In fact, it's also simple. It recursively reassembles the next path name and passes the next data to the breadcrumbs

watch: {
    '$route'(to, from) {
        this.eve_breadcrumbItem_change()
    }
},
...
mounted() {
    this.eve_breadcrumbItem_change()
},

It's also easy to use. It's no more than a watch to detect the path change and avoid no path when refreshing the page. Call it again in mounted.

Result

As a result, the problem will be solved naturally. However, the path configuration may be different from that of others. I like to find an index path by default under grouping. I think this structure is better. Here, please pay attention to it.
If it's helpful to you, please give me a compliment or collect it! Thank you.

Tags: Front-end Vue

Posted on Mon, 02 Dec 2019 00:19:54 -0500 by derrick24