vue 实现动态路由的方法


Posted in Javascript onJuly 06, 2020

很多时候我们在项目的路由都是在前端配置好的
但是有的时候为了进行全面的权限控制,会需要后台给出路由表,前端再渲染。不用在前端配置。

下面主要讲一下思路

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 实现动态路由的方法的详细内容,更多关于vue 实现动态路由的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 Javascript
js 实现碰撞检测的示例
Oct 28 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 #Javascript
解决Nuxt使用axios跨域问题
Jul 06 #Javascript
js实现星星打分效果
Jul 05 #Javascript
jQuery实现简单飞机大战
Jul 05 #jQuery
javascript实现贪吃蛇小练习
Jul 05 #Javascript
jQuery实现简单日历效果
Jul 05 #jQuery
jQuery实现飞机大战小游戏
Jul 05 #jQuery
You might like
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
深入分析PHP引用(&)
2014/09/04 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
python中的字典使用分享
2016/07/31 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
期末考试动员演讲稿
2014/01/10 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
优秀本科生求职推荐信
2014/02/24 职场文书
体育专业求职信
2014/07/16 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
高中教师个人工作总结
2015/02/10 职场文书
年度考核表个人总结
2015/03/06 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫