后台管理动态添加路由

路由分为静态路由和动态路由

静态路由和动态路由的优缺点

静态路由与动态路由优缺点-1.在中大型项目，采用的都是动态路由方式,因为后台导航目录运营人员可能会新增菜单,新增菜单后，前端人员得在路由表填加上，这样导航才能点击才能对应上页面,这样比较麻烦。如果是动态路由，运营人员新增目录后，因为我是动态路由获取永远是最新的路径，一次性通过动态填加的方式加进去,后边就不用管路由的事了,只关心页面就可以了。

动态路由实现思路：

1.在全局路由守卫中，先判断token值有没有。有的话先看是否存储过，如果存储过直接，页面调用渲染，如果没有，就请求接口,把路由表存储下。除非没有token,跳转登录页面

2.路由表里-把那些常规路由(不需要权限的路由，事先都写到路由表里)。把需要权限的路由通过router.addRoute()动态填加到对应的子路由里。

3.动态填加的路由需要处理下。因为后端传给你的是树状结构，前端需要把树结构处理成列表结构(通过递归，不断的获取路径,名字那些信息)，填加到路由表里。

动态路由遇到的问题与解决方式

1.登录后路由表里在次加载一遍动态路由-解决第1次页面点击找不到路径问题,因为路由是动态生成的,登录后路由没有被在次生成，路由表里是空的。所以在路由里要在次生成一遍

2.登录后跳转其它页面,如果刷新，页面找不到问题？原因是路由是动态的，它是在登录后生成的，而其它页面没有在次生成动态路由,所以就找不到。解决办法：可在路由里，在生成一遍动态路由。这样不管在后台哪个页面，一刷新都会先执行。(路由先走)

代码展示

登录页面//动态路由
getmenus().then(res => {//在登录页面，登录请求成功之后，自去请求首页的菜单数据将数据存储到本地   localStorage.setItem("list", JSON.stringify(res.data.data));//数组: 通过函数将数据传递过去 在通过函数的递归拿到对应 路径 名字 let arr = fn(res.data.data);// console.log(141, arr);//在通过forEach循环 通过addRoute添加到动态路由里面arr.forEach(item => {//动态添加都路由里面 (需要添加的页面，每一项)router.addRoute("home", item);});
});// 函数 let fn = data => {// 需要返回出去的数组let arr = [];// 函数，需要我们递归将需要的数据添加到数组里面function deep(data) {data.forEach(item => {if (item.children.length) {deep(item.children);} else {let b = {path: "/" + item.path,name: item.authName,component: () => import(`@/views/yemian/${item.path}.vue`)};arr.push(b);}});}// 调用函数deep(data);// 将数组返回出去return arr;};

路由下
//我们需要添加到实例化路由后const router = createRouter({history: createWebHistory(),routes
})// 我们需要通过函数调用执行    在路由实例化后
// fn()
function fn() {let token = localStorage.getItem("token")let list = JSON.parse(localStorage.getItem("list"))if (token && list.length) {let data=fn1(list)data.forEach(item=>{router.addRoute('home',item)})}
}
// fn()
function fn1(data) {let arr = []function deep(data) {data.forEach(item => {if (item.children.length) {deep(item.children)} else {let b = {path: "/" + item.path,name: item.authName,component: () => import(`@/views/yemian/${item.path}.vue`)}arr.push(b)}})}deep(data)return arr
}router.beforeEach((to, from) => {if (localStorage.getItem("token")) {return true} else {if (to.path == "/login") {return true} else {return "/login"}}
})
export default router

后台管理动态添加路由相关推荐

【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
vue的动态路由（登录之后拿到动态路由通过addRouters()动态添加路由）
登录后我们拿到路由动态路由,后端传的数据可能为这个 {path: '/index',meta: {title: '首页',icon: 'icon-shouye',tab_index: 0, //给头部 ...
Django框架项目——BBS项目介绍、表设计、表创建同步、注册、登录功能、登录功能、首页搭建、admin、头像、图片防盗、个人站点、侧边栏筛选、文章的详情页、点赞点踩、评论、后台管理、添加文章、头像
文章目录 1 BBS项目介绍.表设计项目开发流程表设计 2 表创建同步.注册.登录功能数据库表创建及同步注册功能登陆功能 3 登录功能.首页搭建.admin.头像.图片防盗.个人站点.侧边栏 ...
使用addRoutes动态添加路由
登录是获取添加的路由,存在vuex中 login.vue import {initRoutes} from "@/router/index.js"; // 按需引入路由的动态注入方 ...
activemenu怎么拼 vue_vue-element-admin登录逻辑，以及动态添加路由，显示侧边栏
这段时间在研究element-admin,感觉这个库有许多值得学习的地方,我学习这个库的方法是,先看它的路由,顺着路由,摸清它的逻辑,有点像顺藤摸瓜. 这个库分的模块非常清晰,适合多人合作开发项目,但 ...
动态添加路由 addRoute添加路由刷新404
文章目录动态添加路由案例初步动态添加路由-使用导航守卫解决刷新404问题完整代码: 动态添加路由大概简而言之,就是需要路由是可以按照项目需求进行配置添加的,而不是一开始就配置好的. 就好 ...
通过addroutes动态添加路由
说明:addroutes是用来动态添加路由的,在做权限管理的时候会用到这个api,接下来我们一起来探究一下这个api吧. 一.addroutes的使用 1.router/index.js import ...
addroutes刷新_vue 解决addRoutes动态添加路由后刷新失效问题
前言某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正. 应用场景:用 ...
python3 django html 中文乱码_解决django后台管理界面添加中文内容乱码问题
在学习使用django做一个简单的个人博客项目,通过admin后台添加中文文章内容的时候,遇到中文内容显示乱码的问题. 排除了网上资料中的提到的几个问题: 1.数据上传默认采用的是unicode编码 ...

后台管理动态添加路由

后台管理动态添加路由相关推荐

最新文章

热门文章