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 实现的点击复制代码
Mar 24 Javascript
Javascript 获取LI里的内容
Dec 17 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
Angular2之二级路由详解
Aug 31 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 Javascript
vue+iview使用树形控件的具体使用
Nov 02 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来计算某个目录大小的方法
2014/04/01 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
PHP 8新特性简介
2020/08/18 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
event对象的方法 兼容多浏览器
2009/06/27 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
vue中如何使用ztree
2018/02/06 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
用js实现放大镜效果
2020/10/28 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
window下eclipse安装python插件教程
2017/04/24 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
Python高级property属性用法实例分析
2019/11/19 Python
Django静态文件加载失败解决方案
2020/08/26 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
Python实现疫情地图可视化
2021/02/05 Python
人力资源行政经理自我评价
2013/10/23 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
学习十八大标语
2014/10/09 职场文书
幼儿园辞职书
2015/02/26 职场文书
北大自主招生自荐信
2015/03/04 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS