欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于vue-admin-element中的動(dòng)態(tài)加載路由

 更新時(shí)間:2022年08月13日 09:51:03   作者:Hero_rong  
這篇文章主要介紹了關(guān)于vue-admin-element的動(dòng)態(tài)加載路由,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

先看一下 vue-admin-element 的目錄,對(duì)于新手來(lái)說,看明白項(xiàng)目的目錄很重要,這些目錄都是自動(dòng)生成的

1. 思路

我們要?jiǎng)討B(tài)生成路由,就得有接口,從接口里面獲取路由信息,然后把這些信息動(dòng)態(tài)添加到路由上展示出來(lái)就ok了,仔細(xì)看一下這些數(shù)據(jù),不難發(fā)現(xiàn),里面有 component 組件,這組件后臺(tái)是沒有辦法傳過來(lái)的,需要前端自己轉(zhuǎn)換,下面會(huì)詳細(xì)提到

2. 后臺(tái)第一個(gè)頁(yè)面就是登錄頁(yè)面

登錄頁(yè)面是自帶的且固定的,所以我們就在登錄的時(shí)候調(diào)用接口,這樣登錄進(jìn)去之后就直接看到左側(cè)菜單了,下面在登錄頁(yè)面請(qǐng)求的接口,我們把拿到的數(shù)據(jù)存到 session 里面,這是為了刷新數(shù)據(jù)不丟失,可以看到這里面有個(gè) menu 方法,這個(gè)方法就是 1. 里面說的,轉(zhuǎn)化 component 組件的方法

import { menu } from '@/utils/menu'   //調(diào)用轉(zhuǎn)化組件的方法
authPowerIndexAjax().then(response => {  //調(diào)用真實(shí)的后臺(tái)的接口
  let data = response.data.hasMenuList;
  sessionStorage.setItem('hasMenuList',JSON.stringify(data));
  sessionStorage.setItem('test',JSON.stringify(menu(data)))
  this.$router.addRoutes(menu(data));  //動(dòng)態(tài)添加路由
  let that = this
  that.$router.push({path: '/manager/online-class-children'}) //每次退出重新登陸之后,都回到首頁(yè)
  this.loading = false
})

3. 轉(zhuǎn)化 component 組件

這是我們后端傳來(lái)數(shù)據(jù),每個(gè)項(xiàng)目數(shù)據(jù)不一樣,所以大家重點(diǎn)看紅色框框圈起來(lái)的地方就好了,其他的僅供參考

    if (item.menu_url.length == 0) {
      item.path = '/'+index
      item.component = () => import('@/layout')
      item.meta = {
        title:item.name
      }
    } else {
      item.path = item.menu_url
      let str = item.menu_url
      item.component = () => import(`@/views${str}.vue`)
      item.meta = {
        title:item.name
      }
    }

4. 剛剛上文提到的,防止刷新菜單就消失的問題

在 main.js 加一段代碼就行了,這樣子就大功告成了

// 動(dòng)態(tài)添加路由
if (sessionStorage.getItem('hasMenuList') != null) {
  sessionStorage.setItem('test',JSON.stringify(menu(b)))
  router.addRoutes(menu(b));
}

5. 菜單欄(側(cè)邊欄)顯示

上述步驟都完成后,菜單欄也就是側(cè)邊欄是不會(huì)顯示的,我們需要把數(shù)據(jù)放到側(cè)邊欄里面,其他的都不動(dòng),就把 routes 數(shù)據(jù)換成我們緩存里的數(shù)據(jù)就行了

return JSON.parse(sessionStorage.getItem('test'))

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue.js中created方法作用

    vue.js中created方法作用

    這篇文章主要介紹了vue.js中created方法作用及mounted和created的區(qū)別介紹,需要的朋友可以參考下
    2018-03-03
  • vuecli項(xiàng)目構(gòu)建SSR服務(wù)端渲染的實(shí)現(xiàn)

    vuecli項(xiàng)目構(gòu)建SSR服務(wù)端渲染的實(shí)現(xiàn)

    這篇文章主要介紹了vuecli項(xiàng)目構(gòu)建SSR服務(wù)端渲染的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10
  • element的el-form和el-table嵌套使用實(shí)現(xiàn)

    element的el-form和el-table嵌套使用實(shí)現(xiàn)

    本文主要介紹了element的el-form和el-table嵌套使用實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • vue中關(guān)于el-popover的使用

    vue中關(guān)于el-popover的使用

    這篇文章主要介紹了vue中關(guān)于el-popover的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • axios發(fā)送post請(qǐng)求,提交圖片類型表單數(shù)據(jù)方法

    axios發(fā)送post請(qǐng)求,提交圖片類型表單數(shù)據(jù)方法

    下面小編就為大家分享一篇axios發(fā)送post請(qǐng)求,提交圖片類型表單數(shù)據(jù)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
    2018-03-03
  • vue3?自定義圖片放大器效果的示例代碼

    vue3?自定義圖片放大器效果的示例代碼

    這篇文章主要介紹了vue3?自定義圖片放大器效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-07-07
  • Vue中key為index和id的區(qū)別示例詳解

    Vue中key為index和id的區(qū)別示例詳解

    這篇文章主要介紹了Vue中key為index和id的區(qū)別詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-06-06
  • 詳解Vue.js——60分鐘組件快速入門(上篇)

    詳解Vue.js——60分鐘組件快速入門(上篇)

    本篇文章主要介紹了Vue.js組件,組件系統(tǒng)是Vue.js其中一個(gè)重要的概念,具有一定的參考價(jià)值,有需要的可以了解一下。
    2016-12-12
  • vue 2.0路由之路由嵌套示例詳解

    vue 2.0路由之路由嵌套示例詳解

    這篇文章主要給大家介紹了vue 2.0路由之路由嵌套的相關(guān)資料,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。
    2017-05-05
  • vue彈窗組件使用方法

    vue彈窗組件使用方法

    彈窗是一個(gè)項(xiàng)目必備的復(fù)用利器,這篇文章主要介紹了vue彈窗組件的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-04-04

最新評(píng)論