您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了如何實現vue addRoutes路由動態加載,內容簡而易懂,希望大家可以學習一下,學習完之后肯定會有收獲的,下面讓小編帶大家一起來看看吧。
需求:增加權限控制,實現不同角色顯示不同的路由導航
思路:每次登陸后請求接口返回當前角色路由
核心方法:vue-router2.2.0的addRoutes方法 + vuex
以下是我實現的獲取菜單路由的方法,我將該方法的調用放在首頁組件的生命鉤子中,即便用戶刷新瀏覽器清空了路由還是會重新調用接口獲取,不至于會丟失。同時考慮到會有切換用戶的可能,所以不將獲取到的路由信息保存到cookie或者localstorage當中
獲取菜單之前先判斷routerState,避免多次請求, 我這里使用element-ui的導航菜單功能v-for循環this.myRouter參數即可顯示動態路由導航
/** * 獲取菜單 */ getMenu () { if (this.$store.getters.routerState === false) { // 清理已經存在的動態路由 this.clearDynamicRoute() // 更改請求路由狀態為true this.$store.commit('SET_ROUTERSTATE', true) getMyMenu().then((res) => { if (res.code === '0') { // 格式化路由,將數據轉為addRoutes可接受的route格式數組 let myMenu = this.formatMenu(res.data.menu) if (myMenu.length <= 0) { // 沒有動態路由 return } for (let index = 0; index < myMenu.length; index++) { // 將請求的路由先存放到options對象中 this.$router.options.routes.push(myMenu[index]) } // 將完整需要顯示的路由添加進去 this.$router.addRoutes(this.$router.options.routes) // 這里將路由顯示在頁面上 this.MyRouter = this.$router.options.routes } // 在這里就可以打印出新路由 console.log(this.$router) }) } }
補充知識:vue+element 進入不同路由頁面(二級頁面),讓相應的左側菜單
路由配置
{ path: '/finance', name: 'Finance', meta: { title: '財務' }, component: () => import('@/components/Finance'), redirect: '/finance/code/code', children: [{ path: '/finance/code', name: 'financeindex', meta: { title: '稅收配置' }, redirect: '/finance/code/code', component: () => import('@/components/finance/financeindex'), children: [{ path: '/finance/code/code', name: 'FinanceCode', hidden: false, active:'/finance/code', //這里是在左側菜單顯示并且需要選中的 meta: { title: '稅收編碼(金稅)' }, component: () => import('@/components/finance/code/Code'), }, { path: '/finance/code/codeimportrecord', // 這個路由進入的界面是 稅收編碼(金稅)的二級頁面, 當進入這個頁面的時候,需要菜單中的稅收編碼(金稅)顯示選中 name: 'FinanceCodeImportRecord', hidden: true, meta: { title: '稅收編碼導入記錄' }, component: () => import('@/components/finance/code/CodeImportRecord'), }, { path: '/finance/classcode/classcode', name: 'FinanceClassCode', hidden: false, active:'/finance/classcode', //為了省事,只給需要在左側顯示的路由添加active屬性 meta: { title: '分類稅收編碼確認' }, component: () => import('@/components/finance/classCode/ClassCode'), }, ] }, ]
element
<template> <div class="leftnav"> <!--<div class="" v-for="nav in navs"> <div class="LiHeader"> {{nav.name}} </div> <li v-for="item in nav.san"> {{item.name}} </li> </div>--> <el-menu :default-active=this.show // 這是的值是指與 el-menu-item中:index的值對應的那一天顯示選中(正常情況就是一個頁面一個路由,進入那個路由,對應的導航菜單需要選中) class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#282b33" text-color="#bcbcbc" active-text-color="#ffffff"> <div class="" v-for="(nav,index) in navs" :key="index" > <div class="" > {{nav.meta.title}} </div> <el-menu-item @click="clickroute(item.path)" v-for="(item,index) in nav.children" v-if="!item.hidden" :key="index" :index="item.active"(這里原來是item.path) >{{item.meta.title}}</el-menu-item> </div> </el-menu> </div> </template> <script>
js
data() { return { navs:[], show:null //初始化上面:default-active綁定的值 } }, created() { //// 頁面載入的時候,拿到url,用/拆開,然后拼起來前兩個路徑,并且賦值, 這個時候show對應的就是路由表中的 avtive, let route=this.$route.path.split('/') let vueRouter=this.$router.options.routes.filter(router=>{return router.path=='/'})[0].children let filterVuerouter=vueRouter.filter(router=>{return '/'+route[1] == router.path }) this.navs=filterVuerouter[0].children console.log(this.navs) let router ='/'+route[1]+'/'+route[2] console.log(router) this.show=router // console.log(this.show) }, mounted() { },
以上就是關于如何實現vue addRoutes路由動態加載的內容,如果你們有學習到知識或者技能,可以把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。