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 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
JQuery 写的个性导航菜单
Dec 24 Javascript
javascript中的array数组使用技巧
Jan 31 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
JS delegate与live浅析
Dec 21 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
下拉框select的绑定示例
Sep 04 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
js实现限定范围拖拽的示例
Oct 26 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的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
Pycharm学习教程(1) 定制外观
2017/05/02 Python
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
Python中property属性实例解析
2018/02/10 Python
pandas多级分组实现排序的方法
2018/04/20 Python
利用Python如何生成便签图片详解
2018/07/09 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
PyQt5响应回车事件的方法
2019/06/25 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
爷爷追悼会答谢词
2014/01/24 职场文书
文秘自荐信
2014/06/28 职场文书
物业工程部岗位职责
2015/02/11 职场文书
交通处罚决定书
2015/06/24 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
Python OpenCV 图像平移的实现示例
2021/06/04 Python
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL