Heim > Web-Frontend > js-Tutorial > Konfiguration des Navigationsleistenpfads basierend auf iview-ui (Codebeispiel)

Konfiguration des Navigationsleistenpfads basierend auf iview-ui (Codebeispiel)

不言
Freigeben: 2019-02-20 13:36:23
nach vorne
2614 Leute haben es durchsucht

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
Nach dem Login kopieren

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)
            }
        }
    }
Nach dem Login kopieren

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()
},
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage