vue根据后端菜单自动生成路由(动态路由)
vue根据后端菜单自动生成路由(动态路由)
router.js
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'
import generateRouter from './generateRouter'
import cookie from './cookie.js'
Vue.use(Router)
let router = new Router()
const getRouter = () => {
router.matcher = new Router().matcher//重置路由
router = generateRouter(router)
}
// 在菜单改变时调用重新生成菜单
getRouter() // 全局守卫 控制用户未登录状况下的加载
router.beforeEach(async (to, from, next) => {
if (to.name) { //路由正确
if (to.matched.some(res => res.meta.requireLogin)) { //需要登录
// 判断是否需要登录权限
if (['true', true].indexOf(cookie.getCookie('isLogin')) > -1) {
//判断是否有用户信息
!sessionStorage.getItem('userInfo') && (await store.dispatch('getUserInfo'))
//判断是否有权限树信息
!localStorage.getItem('menuList') && (await store.dispatch('getMenuListByUser')) // next()
} else {
next({
name: 'loginLink1'
})
}
} else {
next()
}
} else { //路由错误
if (['true', true].indexOf(cookie.getCookie('isLogin')) > -1) { //已经登录
next({
name: 'navigationLink'
})
} else {
next({
name: 'loginLink1'
})
}
}
})
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
export { router, getRouter }
生成菜单generateRouter.js
// import router from './index'
// import Router from 'vue-router'
// const router = new Router()
const routes = [
{
path: '/',
name: 'indexLink1',
component: resolve => require(['@/view/index.vue'], resolve),
redirect: '/navigation',
meta: {
title: '首页',
requireLogin: true
},
children: []
},
{
path: '/navigation',
name: 'navigationLink',
component: resolve => require(['@/view/navigation/index.vue'], resolve),
meta: {
title:'导航页',
requireLogin: true
}
},
{
path: '/login',
name: 'loginLink1',
component: resolve => require(['@/view/login/login.vue'], resolve),
meta: {
requireLogin: false
}
},
{
path: '/404',
name: 'unfoundLink',
component: resolve => require(['@/view/404.vue'], resolve),
meta: {
requireLogin: true
}
},
{
path: '/401',
name: 'unPermissionLink',
component: resolve => require(['@/view/401.vue'], resolve),
meta: {
requireLogin: true
}
}
]
const generateRouter = (router) => {
routes[0].children = []
const menuList = JSON.parse(localStorage.getItem('menuList'))
function getAllLeaf(data) {
const result = []
function getLeaf(data) {
data.forEach(item => {
if (!item.hasChild) {
result.push(item)
} else {
getLeaf(item.children)
}
})
}
getLeaf(data)
return result
} if (menuList && menuList.length !== 0) {
const menuLeafList = getAllLeaf(menuList)
menuLeafList.forEach(item => {
if (item.url) {
routes[0].children.push({
path: item.url,
name: `${item.url.split('/').join('')}Link`,
component: (resolve) => require(['@/view' + item.url + '.vue'], resolve),
meta: {
requireLogin: true
}
})
}
})
} router.options.routes = []
routes.forEach(item => {
router.addRoute(item)
router.options.routes.push(item)
})
return router
} export default generateRouter
cookie.js
const cookie = {
/**
* 设置cookie
* @param cname 名称
* @param cvalue 值
* @param exhours 过期时间(单位:小时)
*/
setCookie(cname, cvalue, exhours = 0) {
let expires = ''
if (exhours) {
const d = new Date();
d.setTime(d.getTime() + (exhours * 60 * 60 * 1000));
expires = "expires=" + d.toGMTString();
}
document.cookie = cname + "=" + cvalue + "; " + expires;
},
/**
* 获取cookie
* @param cname 名称
* @return {string}
*/
getCookie(cname) {
const name = cname + "=";
const ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
const c = ca[i].trim();
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
} export default cookie
vue根据后端菜单自动生成路由(动态路由)的更多相关文章
- 06 Vue路由简介,原理,实现及嵌套路由,动态路由
路由概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路 ...
- vue路由--动态路由
前面介绍的路由都是路径和组件一对一映射的 有时候需要多个路径映射到一个组件,这个组件根据参数的不同动态改变,这时候需要用到动态路由 动态路由这样定义路由路径: path: '/foo/:id'--可以 ...
- 组件化框架设计之apt编译时期自动生成代码&动态类加载(二)
阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680 本篇文章将继续从以下两个内容来介绍组件化框架设计: apt编译时 ...
- vue路由-动态路由和嵌套路由
一.动态路由 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那么,我们可以在 vue-route ...
- SpringCloud微服务实战——搭建企业级开发框架(三十一):自定义MybatisPlus代码生成器实现前后端代码自动生成
理想的情况下,代码生成可以节省很多重复且没有技术含量的工作量,并且代码生成可以按照统一的代码规范和格式来生成代码,给日常的代码开发提供很大的帮助.但是,代码生成也有其局限性,当牵涉到复杂的业务逻辑 ...
- 使用vscode,新建.vue文件,tab自动生成vue代码模板
第一步: 新建模板并保存 文件 --> 首选项 --> 用户代码片段 --> 输入vue,选择vue.json -->复制 第三步中的模板内容中内容保存 第二步: 添加配置,让 ...
- android menu菜单自动生成
Android提供了一些简单的方法来为应用添加Menu菜单. 提供了三种类型应用菜单: 一.Options Menu:通过Menu按钮调用菜单 1.在/res/目录下新建menu文件夹,用于存储Men ...
- Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制
思路: 动态路由实现:在导航守卫中判断用户是否有用户信息,通过调用接口,拿到后台根据用户角色生成的菜单树,格式化菜单树结构信息并递归生成层级路由表并使用Vuex保存,通过 router.addRout ...
- Vue + Element UI 实现权限管理系统(动态加载菜单)
动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...
随机推荐
- 常⽤的meta标签有哪些
meta 标签由 name 和 content 属性定义,用来描述网页文档的属性,比如网页的作者,网页描述,关键词等,除了HTTP标准固定了一些name作为大家使用的共识,开发者还可以自定义name. ...
- Kubernetes构建云原生架构-图解
- python数据类型与基础运算
注释:了解其他数据类型补充 基础数据类型补充 可以回一下之前的数据类型: 整型,浮点型,字串符和列表. 一.字典(dict) #字典:可以精准的储存数据 是用大括号表示'{}' '字典和数据数据列表差 ...
- collections、time、datetime、random模块
今日内容概要 1.re模块的其他知识 2.正则起别名与分组机制 3.collections模块 4.time与datetime模块 5.random随机数模块 今日内容详细 re模块的其他知识 imp ...
- jni有关知识点总结
一.c/c++语言: 1.关于动态链接库的搜索问题: LIBRARY_PATH is used by gcc before compilation to search for directories ...
- canvasToTempFilePath: fail SecurityError: The operations is insecure
我这里报这个错是因为canvas用到的图片有跨域问题.解决了跨域就对了. 值得一提的是:我用hbuilderX开发的h5.在内置浏览器调试时一切正常.到了部署上线后才报的这个错.
- uniapp-app 打开小程序
plus.share.getServices( res => { let sw ...
- 2021蓝桥杯省赛B组(C/C++)E.路径【最短路DP】
2021蓝桥杯省赛B组题目(C/C++)E.路径 最短路径, 因为变化情况比较多, 所以开始想的是深搜, 但是太慢了, 跑不出来, 后来就想着优化一下, 有的地方到另一个地方可能会考虑很多遍, 于是考 ...
- sqlmap源码分析(一)
Sqlmap源码分析(一) 此次分析的sqlmap目标版本为1.6.1.2#dev 只对sqlmap的核心检测代码进行详细分析其他的一带而过 sqlmap.py文件结构 为了不让篇幅过长下面只写出了s ...
- k8s入门之namespace(三)
namespace的作用就是用来隔离资源,将同一集群中的资源划分为相互隔离的组.同一名称空间内的资源名称要唯一,但不同名称空间时没有这个要求.有些k8s资源对象与名称空间没有关系,例如 Storage ...