国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > vue-router怎么生成動態地址

vue-router怎么生成動態地址

來源:千鋒教育
發布人:qyf
時間: 2022-09-23 18:01:03 1663927263

vue-router怎么生成動態地址

  1. 動態路由配置的應用場景

  一般我們在使用vue-router進行路由管理的時候,是通過如下方式配置路由與組件之間的映射關系:

  // router/index.js配置文件

  const router = new VueRouter({

  routes:[

  {

  path:'/login',

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

  },

  {

  path:'/reg',

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

  },

  {

  path:'/admin',

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

  },

  {

  path:'/vip',

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

  },

  ]

  })

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

  2. 本地只配置通用路由

  我們為了實現路由的動態配置,需要將上述路由配置進行拆分,本地配置文件中,只保留通用的路由映射。

  const router = new VueRouter({

  routes:[

  {

  path:'/login',

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

  },

  {

  path:'/reg',

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

  }

  ]

  })

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

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

  5. //此處需要實現登錄相關邏輯

  6. res.send({

  7. username:'張三豐',

  8. role:'admin', //標志當前用戶角色

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

  10. {

  11. path:'/admin',

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

  13. },

  14. ...此處可能會有很多其他路由,這些路由數據應該由專門的數據表來存儲

  15. ]

  16. })

  17. })

  4、前端登錄并動態獲取路由配置

  前端登錄成功后,會得到后端動態下發的,跟自己賬號角色相匹配的路由數據,此時可以通過addRoute方法,將這些動態獲取的路由配置數據包,設置給router對象

  // views/Login.vue 登錄面板

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

  let {routerList} = result

  routerList.forEach((item) => {

  this.$router.addRoute(item)

  })

  })

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT