溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹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;到這里其實就完成了，理清楚思路，其實很簡單
以上是vue如何實現動態路由的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
