Konfiguration des Navigationsleistenpfads basierend auf iview-ui (Codebeispiel)

Der Inhalt dieses Artikels befasst sich mit der Konfiguration des Navigationsleistenpfads (Codebeispiel) basierend auf iview-ui. Ich hoffe, dass er für Sie hilfreich ist.

Das Back-End-Managementsystem meines vorherigen Unternehmens wurde durch das Bürsten von Tabellen erstellt. Ich habe schon lange kein Back-End-Managementsystem mehr geschrieben. Nachdem ich den Job gewechselt hatte, fing ich endlich an, mit dem Router herumzuspielen, nachdem ich ihn längere Zeit nicht benutzt hatte, also habe ich einige gängige Module aufgezeichnet und sie mit Freunden geteilt, die sie brauchen.

Nachher

//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

Dies ist Teil meiner Router-Pfadkonfigurationstabelle

 /*面包屑路径处理*/
    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)
            }
        }
    }

Das ist eigentlich einfach die rekursive Neuzusammensetzung des Pfadnamens . Übergeben Sie die Daten an die Breadcrumbs

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

Es ist auch einfach zu verwenden, um die Pfadänderungen zu erkennen, um zu vermeiden, dass der Pfad beim erneuten Aufrufen der Seite verloren geht.

Das Ergebnis

Das Ergebnis ist, dass das Problem auf natürliche Weise gelöst wird. Die Pfadkonfiguration kann jedoch von der aller anderen abweichen. Ich möchte standardmäßig einen Indexpfad unter der Gruppe haben. Bitte achten Sie hier darauf.

Das obige ist der detaillierte Inhalt vonKonfiguration des Navigationsleistenpfads basierend auf iview-ui (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!