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 相关文章推荐
JQuery 图片延迟加载并等比缩放插件
Nov 09 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 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数组排序usort、uksort与sort函数用法
2014/11/17 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
回顾Javascript React基础
2019/06/15 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
基于opencv实现简单画板功能
2020/08/02 Python
详解Python中的路径问题
2020/09/02 Python
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
计算机专业推荐信范文
2013/11/20 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis
Python面向对象编程之类的概念
2021/11/01 Python