亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解基于iview-ui的導(dǎo)航欄路徑(面包屑)配置

 更新時(shí)間:2019年02月22日 09:13:08   作者:messchow  
這篇文章主要介紹了詳解基于iview-ui的導(dǎo)航欄路徑(面包屑)配置,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

起因

上家公司的后臺(tái)管理系統(tǒng)都是刷表刷出來(lái)的,所用很久很久沒(méi)寫(xiě)后臺(tái)管理系統(tǒng)了。換了工作后總算要開(kāi)始搗騰router了,很久沒(méi)用都快忘光了,所以把一些通用的模塊記錄一下,也分享給需要的朋友們。

經(jīng)過(guò)

//router.js
let routes = [
  {
    path: '/',
    redirect: '/admin',
  },
  {
    path: '/login',
    name: 'login',
    meta: {title: '登錄'},
    component: () => import('./components/login.vue')
  },
  {
    path: '/admin',
    name: 'admin',
    meta: {title: '主頁(yè)'},
    component: () => import('./components/admin.vue'),
    children: [
      {
        path: 'operation',
        name: 'operation',
        meta: {title: '運(yùn)營(yíng)管理'},
        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

這個(gè)是我部分的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)
          }
        }
      }

這個(gè)是就是本文的重點(diǎn),其實(shí)也簡(jiǎn)單,就是遞歸了下路徑名重新組裝了下數(shù)據(jù)給面包屑傳過(guò)去

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

使用也簡(jiǎn)單,無(wú)非watch檢測(cè)下路徑變化,避免刷新頁(yè)面時(shí)沒(méi)路徑,在mounted里再調(diào)用一下。

結(jié)果

結(jié)果嘛,自然就解決問(wèn)題。不過(guò)路徑的配置可能會(huì)和大家的不同,我喜歡在分組下默認(rèn)弄個(gè)index路徑,我覺(jué)得這樣結(jié)構(gòu)比較好,這里大家注意下。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue跳轉(zhuǎn)方式(打開(kāi)新頁(yè)面)及傳參操作示例

    vue跳轉(zhuǎn)方式(打開(kāi)新頁(yè)面)及傳參操作示例

    這篇文章主要介紹了vue跳轉(zhuǎn)方式(打開(kāi)新頁(yè)面)及傳參操作,結(jié)合實(shí)例形式分析了vue.js跳轉(zhuǎn)實(shí)現(xiàn)方式與參數(shù)接受相關(guān)操作技巧,需要的朋友可以參考下
    2020-01-01
  • 在?Vue?中控制表單輸入方法詳解

    在?Vue?中控制表單輸入方法詳解

    這篇文章主要介紹了在?Vue?中控制表單輸入方法詳解的相關(guān)資料,需要的朋友可以參考下
    2023-04-04
  • Vue3中實(shí)現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法

    Vue3中實(shí)現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法

    這篇文章主要介紹了Vue3中實(shí)現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-03-03
  • Vue混入mixins滾動(dòng)觸底的方法

    Vue混入mixins滾動(dòng)觸底的方法

    這篇文章主要介紹了Vue混入mixins滾動(dòng)觸底的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • Vue項(xiàng)目中使用setTimeout存在的潛在問(wèn)題及解決

    Vue項(xiàng)目中使用setTimeout存在的潛在問(wèn)題及解決

    這篇文章主要介紹了Vue項(xiàng)目中使用setTimeout存在的潛在問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • Nuxt.js的路由跳轉(zhuǎn)操作(頁(yè)面跳轉(zhuǎn)nuxt-link)

    Nuxt.js的路由跳轉(zhuǎn)操作(頁(yè)面跳轉(zhuǎn)nuxt-link)

    這篇文章主要介紹了Nuxt.js的路由跳轉(zhuǎn)操作(頁(yè)面跳轉(zhuǎn)nuxt-link),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-11-11
  • vscode中prettier和eslint換行縮進(jìn)沖突的問(wèn)題

    vscode中prettier和eslint換行縮進(jìn)沖突的問(wèn)題

    這篇文章主要介紹了vscode中prettier和eslint換行縮進(jìn)沖突的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • petite vue 基本使用指南示例小結(jié)

    petite vue 基本使用指南示例小結(jié)

    petite-vue 是為漸進(jìn)增強(qiáng)而優(yōu)化的另一種 Vue 發(fā)行版,它提供與標(biāo)準(zhǔn) Vue 相同的模板語(yǔ)法和反應(yīng)性心智模型,這篇文章主要介紹了petite vue 基本使用指南,需要的朋友可以參考下
    2024-07-07
  • vue項(xiàng)目登錄頁(yè)面實(shí)現(xiàn)記住用戶(hù)名和密碼的示例代碼

    vue項(xiàng)目登錄頁(yè)面實(shí)現(xiàn)記住用戶(hù)名和密碼的示例代碼

    本文主要介紹了vue項(xiàng)目登錄頁(yè)面實(shí)現(xiàn)記住用戶(hù)名和密碼的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • Vue使用vm.$set()解決對(duì)象新增屬性不能響應(yīng)的問(wèn)題

    Vue使用vm.$set()解決對(duì)象新增屬性不能響應(yīng)的問(wèn)題

    這篇文章主要介紹了Vue使用vm.$set()解決對(duì)象新增屬性不能響應(yīng)的問(wèn)題,為了解決這個(gè)問(wèn)題,Vue提供了一個(gè)特殊的方法vm.$set(object, propertyName, value),也可以使用全局的Vue.set(object, propertyName, value)方法,需要的朋友可以參考下
    2023-05-05

最新評(píng)論