詳解基于iview-ui的導航欄路徑(面包屑)配置
起因
上家公司的后臺管理系統(tǒng)都是刷表刷出來的,所用很久很久沒寫后臺管理系統(tǒng)了。換了工作后總算要開始搗騰router了,很久沒用都快忘光了,所以把一些通用的模塊記錄一下,也分享給需要的朋友們。
經(jīng)過
//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
這個是我部分的router路徑配置表
/*面包屑路徑處理*/ 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': list.slice(0,index+1).join('/')}) 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) } } }
這個是就是本文的重點,其實也簡單,就是遞歸了下路徑名重新組裝了下數(shù)據(jù)給面包屑傳過去
watch: { '$route'(to, from) { this.eve_breadcrumbItem_change() } }, ... mounted() { this.eve_breadcrumbItem_change() },
使用也簡單,無非watch檢測下路徑變化,避免刷新頁面時沒路徑,在mounted里再調(diào)用一下。
結(jié)果
結(jié)果嘛,自然就解決問題。不過路徑的配置可能會和大家的不同,我喜歡在分組下默認弄個index路徑,我覺得這樣結(jié)構(gòu)比較好,這里大家注意下。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中實現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法
這篇文章主要介紹了Vue3中實現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法,本文結(jié)合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03Nuxt.js的路由跳轉(zhuǎn)操作(頁面跳轉(zhuǎn)nuxt-link)
這篇文章主要介紹了Nuxt.js的路由跳轉(zhuǎn)操作(頁面跳轉(zhuǎn)nuxt-link),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11vscode中prettier和eslint換行縮進沖突的問題
這篇文章主要介紹了vscode中prettier和eslint換行縮進沖突的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10vue項目登錄頁面實現(xiàn)記住用戶名和密碼的示例代碼
本文主要介紹了vue項目登錄頁面實現(xiàn)記住用戶名和密碼的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07