Configuration du chemin de la barre de navigation basée sur iview-ui (exemple de code)

Le contenu de cet article concerne la configuration du chemin de la barre de navigation (exemple de code) basé sur iview-ui. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Le système de gestion back-end de mon ancienne entreprise a été créé en brossant des tables. Je n'ai pas écrit de système de gestion back-end depuis très, très longtemps. Après avoir changé de travail, j'ai finalement commencé à jouer avec le routeur. Je l'ai presque oublié après ne pas l'avoir utilisé pendant une longue période, j'ai donc enregistré quelques modules courants et les ai partagés avec des amis qui en avaient besoin.

Après

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

Cela fait partie du tableau de configuration du chemin de mon routeur

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

C'est l'objet de cet article. C'est en fait simple. le chemin. Le nom a réassemblé les données et les a transmis au fil d'Ariane

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

Il est également simple à utiliser. Il surveille simplement les changements de chemin pour éviter de manquer le chemin lors de l'actualisation de la page. encore une fois monté.

Le résultat

Le résultat est que le problème sera résolu naturellement. Cependant, la configuration du chemin peut être différente de celle de tout le monde. J'aime avoir un chemin d'index par défaut sous le groupe . Je pense que cette structure est meilleure. Veuillez faire attention ici.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!