vue动态路由-后端接口

本文介绍了一种基于用户权限动态加载路由的方法,通过store.dispatch('GetInfo')获取用户信息,利用递归函数为每个菜单项添加组件,实现权限数据的动态更新。同时,将自定义的权限数据与现有路由合并,确保路由加载的完整性和安全性。

 *通过获取后台用户信息的权限来进行路由的动态加载

store.dispatch('GetInfo').then(res => { // 拉取用户信息
          let permissionData = tool.deepCopy(store.getters.permission)
          let getData = (obj) => {
            if(obj.children) {
              obj.children.forEach((item) => {
                item.component = _import(item.component)
                getData(item)
              })
            }
          }

          //递归进行路由菜单添加
          permissionData.forEach((item) => {
            item.component = Layout
            item.alwaysShow = true
            getData(item)
          })
          permissionData.push({ path: '*', redirect: '/404', hidden: true })
          router.options.routes = router.options.routes.concat(permissionData)
          router.addRoutes(permissionData)
          next({ ...to, replace: true })//确保addRoutes完成
        }).catch((error) => {
          store.dispatch('FedLogOut').then(() => {
            Message.error('验证失败,请重新登录')
            next({ path: '/login' })
          })
          NProgress.done() // 结束Progress
        })

 

Vue动态添加路由通常是在应用启动时,数据请求完成后,根据后端返回的数据动态配置路由。这可以通过`vue-router`的钩子函数如`beforeCreate`, `created`, 或者`asyncData`来完成。以下是基本步骤: 1. 安装并引入必要的库: ```javascript import Vue from 'vue'; import Router from 'vue-router'; ``` 2. 创建一个路由实例,并设置动态加载模式: ```javascript Vue.use(Router); const router = new Router({ mode: 'history', // 如果你的项目支持HTML5 History API base: process.env.BASE_URL, routes: [] }); ``` 3. 使用`asyncData`函数从后端API获取数据: ```javascript router.options asyncData({ params }) { try { const response = await axios.get(`/api/routes?param=${params.id}`); // 替换为实际的API请求 return { routeData: response.data }; } catch (error) { console.error('Error fetching routes:', error); return {}; } } ``` 4. 在`asyncData`返回的数据中定义动态路由: ```javascript router.beforeEach((to, from, next) => { router.addRoute(to.meta.route, { path: to.meta.path, // 从后端数据中获取的路径 component: () => import(`@/components/${to.meta.component}`), // 引入对应的组件 name: to.meta.name, // 如果有名称,也从后端获取 ...to.meta.propsData // 如果需要传递动态参数 }); if (!router.hasRoute(to.fullPath)) { next('/not-found'); // 没找到路由,则跳转到404页面 } else { next(); } }); ``` 5. 后续每次导航时,`asyncData`会被自动调用,更新路由
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值