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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
利用js实现简易红绿灯
Oct 15 Javascript
使用vant的地域控件追加全部选项
Nov 03 Javascript
vue router返回到指定的路由的场景分析
Nov 10 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
玛琪朵 Macchiato
2021/03/03 咖啡文化
使用php4加速网络传输
2006/10/09 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
php类自动加载器实现方法
2015/07/28 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
javascript闭包的理解和实例
2010/08/12 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
微信小程序上传图片实例
2018/05/28 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
Python编程实现正则删除命令功能
2017/08/30 Python
Python实现自动发送邮件功能
2021/03/02 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
实习期自我鉴定
2013/10/11 职场文书
于丹论语心得观后感
2015/06/15 职场文书
深入理解python协程
2021/06/15 Python
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫