Vue 動態路由的實現詳情

Posted on by

前言：

動態路由是一個常用的功能，根據後臺返回的路由json表，前端動態顯示可跳轉的路由項，下面來講解一下具體的實現方式：

大致業務需求：前端在login登陸頁，輸入賬號密碼後，點擊登陸，接口返回登陸成功的同時，也會把該用戶可操作的路由鏈表返回給前端（JSON數組格式），前端拿到這個JSON數組，來渲染成側邊欄列表（說的是PC端），我們需要將所有的頁面都寫好，然後去匹配後臺返回的部分路由來進行展示（比如項目一共有100個頁面，後臺返回瞭10個路由地址，那麼我們隻展示返回的對應的10個即可）

說一下思路：

我們可以將路由分為3個部分：

  • 1.默認展示的部分（包括login頁面、404頁面等等）
  • 2.後臺返回的部分（具有權限操作的部分路由）
  • 3.全部動態路由（比如後臺返回瞭10個路由地址，我們全部動態的路由是100個地址，所做的就是將100個全部動態路由裡面和後臺返回的對應匹配的10個路由追加到默認路由裡面，就可以完成動態路由的流程瞭）

正常路由，我們的寫法大概是這樣的：

//src/router/index.js
import Router from 'vue-router'
Vue.use(Router)
const Routes = [
    {
        path:'/',
        component:Login,
        meta: {
            title: '登錄頁'
        }
    },
    {
        path:'/Home',
        component:Home,
        meta: {
            title: 'Home主頁'
        }
    }
]
const Routers = new Router({
    routes: Routes
})
export default Routers;

我們要做動態路由，就需要改變一下這個結構（分為動態+靜態），這裡的靜態是指需要匹配展示對應的，所以，我們需要在建一個全部的路由JSON

//stc/router/index.js
const defaultRoutes = [
//...這默認路由就是上面代碼內的登錄頁/404頁面...
]
const allRouters = [//這裡就是全部動態路由
    {
        path:'/UserList',
        component:UserList,
        meta: {
            title: '人員管理'
        }
    },
    {
        path:'/PwdList',
        component:PwdList,
        meta: {
            title: '密碼管理'
        }
    }
]
const Routers = new Router({
    routes: defaultRoutes//默認渲染 -> 默認路由
})
export default Routers;

所有的靜態路由和動態路由，都寫完瞭，接下來就是關鍵部分（將後臺返回的路由json拼接到route內），由於我們是在login頁面點擊登陸後，進行的跳轉，所以，把代碼寫到路由鉤子內（Routers.beforeach函數）

Routers.beforeEach((to,from,next) => {
    if(to.path != '/' && !store.state.isLogin) {
        //跳轉的不是首頁 同時 用戶還未登陸
        //這個判斷，我們就可以基本判定用戶是在做登陸時候的跳轉
        //↓拿到登陸時，接口返回的路由數組（vuex內）,大致是這樣的
        let resRouterArr = [
            {
                routeName: '人員管理',
                children: [
                    {
                        routeName: '銷售管理',
                        ...
                    },
                    {
                        routeName: '內勤管理',
                        ...
                    }
                ]
            }
        ]
        let routerArr = []
        resRouterArr.forEach(item => {
            allRouters.forEach(all => {
                if(item.routeName == all.routeName) {
                    //拿到本地路由對象
                    let obj = JSON.parse(JSON.stringify(all))
                    let childrenRouter = []
                    if(item.children && item.children.length > 0) {
                        item.children.forEach(childItem => {
                            all.children.forEach(allItem => {
                                if(childItem.routeName == allItem.routerName) {
                                    childrenRouter.push(allItem)
                                }
                            })
                        })
                        obj.children = childrenRouter
                    }
                    routerArr.push(obj)
                }
            })
        })
        Routers.addroutes(routerArr)//addroutes為添加路由數組的方法
        store.commit('domRouteTree',rousterArr)//存儲進vuex，之後頁面左右路由列表渲染使用
        next({...to,replace:true})//進行路由跳轉
    } else {
        next()
    }
})

這樣，我們跳轉到之後的業務頁面，就可以看到列表左側生成的動態路由列表瞭，點擊左側的幾個動態生成的路由，也很nice，麼得問題~

ps：這裡遇到瞭一個坑，踩瞭一會兒，也記上

以前都是這樣寫的：

import UserList from '@/views/User/UserList'

但是跳轉過去之後，頁面就會出現白屏報錯的情況，查瞭半天，原來要補齊路徑

import UserList from '@/views/User/UserList.vue'

到此這篇關於Vue 動態路由的實現的文章就介紹到這瞭,更多相關Vue 動態路由 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：