久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

    1. <style id="76ofp"></style>

      <style id="76ofp"></style>
      <rt id="76ofp"></rt>
      <form id="76ofp"><optgroup id="76ofp"></optgroup></form>
      1. 千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

        手機(jī)站
        千鋒教育

        千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

        千鋒教育

        掃一掃進(jìn)入千鋒手機(jī)站

        領(lǐng)取全套視頻
        千鋒教育

        關(guān)注千鋒學(xué)習(xí)站小程序
        隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

        當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > vue-router怎么生成動(dòng)態(tài)地址

        vue-router怎么生成動(dòng)態(tài)地址

        來(lái)源:千鋒教育
        發(fā)布人:qyf
        時(shí)間: 2022-09-23 18:01:03 1663927263

        vue-router怎么生成動(dòng)態(tài)地址

          1. 動(dòng)態(tài)路由配置的應(yīng)用場(chǎng)景

          一般我們?cè)谑褂胿ue-router進(jìn)行路由管理的時(shí)候,是通過(guò)如下方式配置路由與組件之間的映射關(guān)系:

          // router/index.js配置文件

          const router = new VueRouter({

          routes:[

          {

          path:'/login',

          component:()=>import ('../views/Login') //登錄路由

          },

          {

          path:'/reg',

          component:()=>import ('../views/Reg') //注冊(cè)路由

          },

          {

          path:'/admin',

          component:()=>import ('../views/Admin') //這是一個(gè)管理員才能訪問(wèn)的路由

          },

          {

          path:'/vip',

          component:()=>import ('../views/Vip') //假設(shè),這是要給vip用戶才能訪問(wèn)的路由

          },

          ]

          })

          但是在后臺(tái)管理平臺(tái)這種類型的項(xiàng)目中,我們需要讓擁有不同角色權(quán)限的用戶,訪問(wèn)不同的菜單及路由,如上述代碼所示,部分路由只有管理員才能訪問(wèn),而另外一部分路由只能vip用戶才能訪問(wèn),所以需要用到vue-router提供的addRoute方法來(lái)動(dòng)態(tài)管理這一部分路由配置。

          2. 本地只配置通用路由

          我們?yōu)榱藢?shí)現(xiàn)路由的動(dòng)態(tài)配置,需要將上述路由配置進(jìn)行拆分,本地配置文件中,只保留通用的路由映射。

          const router = new VueRouter({

          routes:[

          {

          path:'/login',

          component:()=>import ('../views/Login') //登錄路由

          },

          {

          path:'/reg',

          component:()=>import ('../views/Reg') //注冊(cè)路由

          }

          ]

          })

          3. 后端為每個(gè)用戶分配一個(gè)角色,隨登錄接口下發(fā)給前端

          4. app.get('/login',(req,res)=>{

          5. //此處需要實(shí)現(xiàn)登錄相關(guān)邏輯

          6. res.send({

          7. username:'張三豐',

          8. role:'admin', //標(biāo)志當(dāng)前用戶角色

          9. routerList:[ //此處的路由配置,也可以通過(guò)獨(dú)立接口向前端提供

          10. {

          11. path:'/admin',

          12. component:()=>import ('../views/Admin') //這是一個(gè)管理員才能訪問(wèn)的路由

          13. },

          14. ...此處可能會(huì)有很多其他路由,這些路由數(shù)據(jù)應(yīng)該由專門的數(shù)據(jù)表來(lái)存儲(chǔ)

          15. ]

          16. })

          17. })

          4、前端登錄并動(dòng)態(tài)獲取路由配置

          前端登錄成功后,會(huì)得到后端動(dòng)態(tài)下發(fā)的,跟自己賬號(hào)角色相匹配的路由數(shù)據(jù),此時(shí)可以通過(guò)addRoute方法,將這些動(dòng)態(tài)獲取的路由配置數(shù)據(jù)包,設(shè)置給router對(duì)象

          // views/Login.vue 登錄面板

          axios.get('/login',(result)=>{

          let {routerList} = result

          routerList.forEach((item) => {

          this.$router.addRoute(item)

          })

          })

        tags:
        聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
        10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
        請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
        免費(fèi)領(lǐng)取
        今日已有369人領(lǐng)取成功
        劉同學(xué) 138****2860 剛剛成功領(lǐng)取
        王同學(xué) 131****2015 剛剛成功領(lǐng)取
        張同學(xué) 133****4652 剛剛成功領(lǐng)取
        李同學(xué) 135****8607 剛剛成功領(lǐng)取
        楊同學(xué) 132****5667 剛剛成功領(lǐng)取
        岳同學(xué) 134****6652 剛剛成功領(lǐng)取
        梁同學(xué) 157****2950 剛剛成功領(lǐng)取
        劉同學(xué) 189****1015 剛剛成功領(lǐng)取
        張同學(xué) 155****4678 剛剛成功領(lǐng)取
        鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
        董同學(xué) 138****2867 剛剛成功領(lǐng)取
        周同學(xué) 136****3602 剛剛成功領(lǐng)取
        相關(guān)推薦HOT
        大數(shù)據(jù)測(cè)試工程師需要具備哪些技能?

        一、理解大數(shù)據(jù)概念大數(shù)據(jù)測(cè)試工程師需要理解大數(shù)據(jù)的基本概念和原理,如分布式存儲(chǔ)、MapReduce、實(shí)時(shí)計(jì)算等。他們還需要了解如何處理大規(guī)模的...詳情>>

        2023-10-14 23:43:03
        為什么SpringBoot的 jar 可以直接運(yùn)行?

        一、JAR文件的結(jié)構(gòu)與執(zhí)行方式Spring Boot的JAR包是Java Archive的縮寫,它是一種壓縮文件格式,可以將Java項(xiàng)目的類文件、資源文件以及依賴庫(kù)等...詳情>>

        2023-10-14 23:01:49
        站群服務(wù)器是什么?

        站群服務(wù)器的含義與用途站群服務(wù)器主要用于支持站群,即由一組相互鏈接的網(wǎng)站組成的群體。這些網(wǎng)站通常由同一組織或個(gè)人擁有,并且經(jīng)常會(huì)互相鏈...詳情>>

        2023-10-14 22:46:12
        自編碼器是什么?

        一、自編碼器原理自編碼器的設(shè)計(jì)靈感源于神經(jīng)科學(xué)中關(guān)于感知系統(tǒng)的認(rèn)知原理,它的核心思想是將輸入數(shù)據(jù)經(jīng)過(guò)編碼過(guò)程,形成一個(gè)隱藏層的特征表示...詳情>>

        2023-10-14 22:41:10
        什么是云網(wǎng)融合?

        一、云網(wǎng)融合的定義云網(wǎng)融合是指將云計(jì)算與網(wǎng)絡(luò)技術(shù)相結(jié)合,實(shí)現(xiàn)資源的共享、業(yè)務(wù)的協(xié)同,將網(wǎng)絡(luò)與云端服務(wù)深度融合,提供更靈活、高效、安全的...詳情>>

        2023-10-14 22:31:47
        快速通道
        积石山| 宝兴县| 监利县| 宁安市| 北安市| 南乐县| 嘉禾县| 唐海县| 屏边| 邛崃市| 临朐县| 苏尼特右旗| 奉贤区| 富源县| 宁德市| 横山县| 瑞丽市| 邛崃市| 锡林浩特市| 南郑县| 冕宁县| 开平市| 田阳县| 尉氏县| 沧源| 石屏县| 龙门县| 汤原县| 吕梁市| 岐山县| 奉贤区| 吉首市| 锡林浩特市| 新营市| 郴州市| 芮城县| 进贤县| 凤庆县| 和田县| 正镶白旗| 同德县|