vue 实现动态路由

很多时候我们在项目的路由都是在前端配置好的
但是有的时候为了进行全面的权限控制,会需要后台给出路由表,前端再渲染。不用在前端配置。
下面主要讲一下思路
1、和后台沟通好数据,把我们前端配置的路由表数据给他
2、拿到数据需要我们自己再处理
路由中的component后台是给不了的,这里我们只需要后台小哥哥按照我们提供的前端component路径给数据,我们循环加载就可以了
这样我们就拿到了最重要的数据,即component。
//view就是后台给的数据
return () => import(`@/view/modules/${view}`);

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;

到这里其实就完成了,理清楚思路,其实很简单

参考:
https://www.jianshu.com/p/51fb8003f312

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现动态路由菜单,可以按照以下步骤进行: 1. 在路由配置文件中,定义一个需要动态生成的路由数组,如下所示: ``` const dynamicRoutes = [ { path: '/dashboard', name: 'Dashboard', component: () => import('@/views/dashboard'), meta: { title: 'Dashboard', icon: 'dashboard' } }, { path: '/user', name: 'User', component: () => import('@/views/user'), meta: { title: 'User', icon: 'user' }, children: [ { path: 'list', name: 'UserList', component: () => import('@/views/user/list'), meta: { title: 'User List', icon: 'user' } }, { path: 'detail/:id', name: 'UserDetail', component: () => import('@/views/user/detail'), meta: { title: 'User Detail', icon: 'user' } } ] } ] ``` 2. 在路由配置文件中,定义一个路由表,包含所有静态路由需要动态生成的路由,如下所示: ``` import Vue from 'vue' import Router from 'vue-router' import staticRoutes from './staticRoutes' import dynamicRoutes from './dynamicRoutes' Vue.use(Router) const router = new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ ...staticRoutes, ...dynamicRoutes ] }) export default router ``` 3. 在菜单组件中,根据路由表动态生成菜单,如下所示: ``` <template> <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :collapse="isCollapse"> <template v-for="item in menuList"> <template v-if="item.children"> <el-submenu :index="item.path"> <template slot="title"> <i :class="item.meta.icon"></i> <span slot="title">{{ item.meta.title }}</span> </template> <template v-for="child in item.children"> <el-menu-item :index="child.path" :key="child.path"> <router-link :to="child.path">{{ child.meta.title }}</router-link> </el-menu-item> </template> </el-submenu> </template> <template v-else> <el-menu-item :index="item.path" :key="item.path"> <i :class="item.meta.icon"></i> <router-link :to="item.path">{{ item.meta.title }}</router-link> </el-menu-item> </template> </template> </el-menu> </template> <script> export default { data() { return { menuList: [] } }, created() { this.menuList = this.$router.options.routes.filter(route => route.meta && route.meta.title) } } </script> ``` 其中,menuList 是根据路由表生成的菜单数组。在 created 钩子中,我们通过过滤路由表中有 meta.title 属性的路由,来生成菜单数组。 这样,就可以实现动态路由菜单了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值