vue 實現動態路由

很多時候我們在項目的路由都是在前端配置好的
但是有的時候為了進行全面的權限控制，會需要后台給出路由表，前端再渲染。不用在前端配置。

下面主要講一下思路
1、和后台小哥哥溝通好數據，把我們前端配置的路由表數據給他，他就能看懂了

2、拿到數據需要我們自己再處理
路由中的component后台是給不了的，這里我們只需要后台小哥哥按照我們提供的前端component路徑給數據，我們循環加載就可以了

 

//view就是后台給的數據
return () => import(`@/view/modules/${view}`);

　　

這樣我們就拿到了最重要的數據，即component。

3、把后台提供的數據處理成我們需要的路由表
4、添加到路由中

 Router.addRoutes(路由數據)

　　

以下講一下我在項目中實現過程
1、新建一個router.js
里面做些基本的路由操作，比如導入包，因為我們拿到數據之后還是要自己手動去放到路由中去的
也會寫一寫不需要后台提供的菜單數據，比如我們測試頁面或者login等等

import Vue from "vue";
import Router from "vue-router";
import AppMain from "@/view/modules/main/index";
Vue.use(Router);
export const _CONSTANTS_ROUTERS =
[
    {
        path: "/login",
        component: () => import("@/view/modules/login/index"),
        hidden: true
    },
    {
        path: "",
        component: AppMain,
        redirect: "/dashboard",
        children: [
            {
                path: "/dashboard",
                component: () => import("@/view/modules/dashboard/index"),
                name: "Dashboard",
                meta: { title: "首頁", icon: "dashboard", noCache: true }
            }
        ]
    }
];
export default new Router({
    mode: "history",
    // 解決vue框架頁面跳轉有白色不可追蹤色塊的bug
    scrollBehavior: () => ({ x: 0, y: 0 }),
    // scrollBehavior: () => ({ y: 0 }),
    routes: _CONSTANTS_ROUTERS
});

　　

基本路由表已經建立好了

2、我們在什么時候進行獲取完整的路由表數據
這個時候我們就要想到路由鈎子函數，當然是Router.beforeEach中做

Router.beforeEach((to, from, next) =>
{
    NProgress.start();
    if (!Token.isEmpty())
    { 
        if (to.path === "/login")
        {
            next({ path: "/" });
            NProgress.done(); 
        }
        else if (to.path === "/404")
        {
            next();
            NProgress.done();
        }
        else
        {
            // 判斷當前用戶是否已拉取完角色信息
            if (Store.getters.roles.length === 0)
            {
                 //拉取路由數據
ACLRepo.listMenuTreeOfCurrentUser().then(response =>
                    {
                        Store.dispatch("generateRoutes", response).then(() =>
                        {
                            // 根據roles權限生成可訪問的路由表
                            Router.addRoutes(Store.getters.addRouters); // 動態添加可訪問路由表
                            next({ ...to, replace: true }); // hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
                        });
                    });
            }
            else
            {
                 next();
            }
        }
    }
    else
    {
       next();
    }
});

　　3、路由數據重新封裝
generateRoutes

import { _CONSTANTS_ROUTERS } from "@/scripts/router";
import AppMain from "@/view/modules/main/index";
const _PERMISSION = {
    state: {
        routers: _CONSTANTS_ROUTERS,
        addRouters: []
    },
    mutations: {
        setRouters: (state, routers) =>
        {
            state.addRouters = routers;
            //和已經存在的路由表拼接
            state.routers = _CONSTANTS_ROUTERS.concat(routers);
        }
    },
    actions: {
        generateRoutes({ commit }, response)
        {
            let asyncRouters = filterAsyncRouter(response);
            asyncRouters.push({ path: "*", redirect: "/404", hidden: true });
            commit("setRouters", asyncRouters);
        }
    }
};

function filterAsyncRouter(routers)
{
    // 遍歷后台傳來的路由字符串，轉換為組件對象
    let accessedRouters = routers.filter(router =>
    {
        if (router.meta)
        {
            // 默認圖標處理
            router.meta.icon = router.meta.icon ? router.meta.icon : "component";
        }
        if (router.component === "main")
        {
            // Main組件特殊處理
            router.component = AppMain;
        }
        else
        {
            //處理組件---重點
            router.component = loadView(router.component);
        }
        //存在子集
        if (router.children && router.children.length)
        {
            router.children = filterAsyncRouter(router.children);
        }
        return true;
    });
    return accessedRouters;
}
function loadView(view)
{
    // 路由懶加載
    return () => import(`@/view/modules/${view}`);
}
export default _PERMISSION;

　　到這里其實就完成了，理清楚思路，其實很簡單