Navigation bar path configuration based on iview-ui (code example)

The content of this article is about the navigation bar path configuration (code example) based on iview-ui. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The back-end management system of my previous company was created by swiping tables. I haven’t written a back-end management system for a long, long time. After changing jobs, I finally started playing around with the router. I almost forgot about it after not using it for a long time, so I recorded some common modules and shared them with friends who need them.

After

//router.js
let routes = [
    {
        path: '/',
        redirect: '/admin',
    },
    {
        path: '/login',
        name: 'login',
        meta: {title: '登录'},
        component: () => import('./components/login.vue')
    },
    {
        path: '/admin',
        name: 'admin',
        meta: {title: '主页'},
        component: () => import('./components/admin.vue'),
        children: [
            {
                path: 'operation',
                name: 'operation',
                meta: {title: '运营管理'},
                component: () => import('./components/admin/operation.vue')
            },
            {
                path: 'order',
                name: 'order',
                meta: {title: '订单中心'},
                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: '订单详情'},
                        component: () => import('./components/admin/orderdetail.vue')
                    },
                ]
            },
        ]
    },
]

export default routes

This is part of my router path configuration table

 /*面包屑路径处理*/
    eve_breadcrumbItem_change(){
        var list = this.$route.fullPath.split('/')//list[0]:是空格
        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. It is actually simple. It just recursively reassembles the path name. Pass the data to the breadcrumbs

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

It is also simple to use. It just watches to detect the path changes to avoid missing the path when refreshing the page. Call it again in mounted.

Result

The result is that the problem will be solved naturally. However, the path configuration may be different from everyone else's. I like to have an index path by default under the group. I think this structure is better. Please pay attention here.

The above is the detailed content of Navigation bar path configuration based on iview-ui (code example). For more information, please follow other related articles on the PHP Chinese website!