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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
jQuery 使用手册(四)
Sep 23 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 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设计模式 Observer(观察者模式)
2011/06/26 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
详解a++和++a的区别
2017/08/30 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
Python中的is和id用法分析
2015/01/26 Python
Python 详解基本语法_函数_返回值
2017/01/22 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
python实现字符串和字典的转换
2018/09/29 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
优秀管理者获奖感言
2014/02/17 职场文书
初三学习决心书
2014/03/11 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
班主任高考寄语
2015/02/26 职场文书
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android
vue router 动态路由清除方式
2022/05/25 Vue.js