Vue implementa enrutamiento dinámico

En muchos casos, el enrutamiento de nuestro proyecto se configura en el front-end,
pero a veces para llevar a cabo un control de permisos completo, tendremos que proporcionar la tabla de enrutamiento en segundo plano y luego renderizar el front-end. No es necesario configurar en el front-end.

Lo siguiente habla principalmente de ideas

1. Comunicar los datos con el hermano pequeño en segundo plano 把我们前端配置的路由表数据给他, él puede entender

2 、拿到数据需要我们自己再处理

componentNo se puede proporcionar el backend en el enrutamiento , aquí solo necesitamos que el hermano pequeño del backend componentproporcione los datos de acuerdo con la ruta de acceso frontal que proporcionamos , podemos cargarlo en un bucle

//view就是后台给的数据
return () => import(`@/view/modules/${view}`);

De esta forma obtenemos los datos más importantes, componente.

3. Procese los datos proporcionados por el fondo en la tabla de enrutamiento que necesitamos
4. Agregue al enrutamiento

 Router.addRoutes(路由数据)

Lo siguiente habla sobre mi proceso de implementación en el proyecto

1. Cree un nuevo router.js

Hay algunas operaciones de enrutamiento básicas, como la importación de paquetes, porque todavía tenemos que ponerlos manualmente en la ruta después de obtener los datos.
También escribiremos datos de menú que no es necesario proporcionar en segundo plano, como nuestra página de prueba o inicio de sesión, etc.

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
});

Se ha establecido la tabla de enrutamiento básica.

2. ¿Cuándo obtenemos los datos completos de la tabla de enrutamiento?

En este momento, debemos pensar en la función de enrutamiento de enrutamiento, por supuesto, hacerlo en el enrutador.

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. Reempaquetado de datos de enrutamiento

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;

Esto se hace realmente aquí, despeja la línea de pensamiento