vue动态菜单,vue实现页面权限中的菜单配置
vue动态菜单,vue实现页面权限中的菜单配置详细介绍
@import "src/base/css/public/variable.scss"; @import "swiper/dist/css/swiper.css"; .s-slider { height: 100%; color: white; .swiper-container { @include fill-with-parent } } 本文目录一览： vue项目实现动态路由和动态菜单搭建插件式开发框架免费源码
以往我们在开发vue项目的时候，总是通过将路径和路由写在route/index.js文件中，然后直接进行访问即可，一般实现权限匹配都是通过菜单下面的权限参数和路由守卫进行一个验证拦截和权限匹配，然而这样安全性仍然不足。因为我们在route/index.js中已经写满了所有的路由，这样子不仅造成静态路由内容过多、修改困难，同时当静态路由内容过多的时候，我们在路由中的内容就显得极其复杂。
而后端对前端的控制也显得较为无力，无法实现严格性的控制。
由此我们发现通过动态路由控制是必然的，此时我们只需要通过后端获取数据菜单和路由信息json，然后动态添加路由并生成菜单，使菜单与动态路由内容进行一个匹配，这样子我们可以实现由后端控制前端的菜单和路由，我们的项目往往只需要内置几个组件无需权限的公共页面如登陆、注册、忘记密码和404错误这几个常用页面组件。
我们只需要将写好的组件放置到我们的view视图下，然后我们通过动态的路由和菜单实现路由添加和菜单进行匹配，我们便可实现对插件进行访问，我们减少了对route/index.js内容写入，同时也有利于减少内存的占用。
我们通过动态路由的形式，我们生成的菜单权限更加的完善，不仅实现依靠菜单与路由守卫拦截实现鉴权，也可以通过动态路由实现动态加载vue文件，控制更加深度
我们通过动态路由的形式，我们可以将项目分给不同的人进行完成，便于组建一个开发团队，因为他们所开发的组件，我们只需要在具备基本的javascript库的情况下。我们直接进行动态路由的一个挂载和菜单生成便可完成项目合作，减少了对route/index.js文件的操作，保证项目的完整性。
最后我发现在非node环境的开发条件下，我们可以实现远程的vue文件加载，这不仅为我们开发提供了便利，同时也有利于我们及时修改文件，以达到项目的需求，更有利于保障安全，实现服务器vue文件加载。
Vue：2.6.11。
Vue-route：3.2.0。
主页
聊天
第一通过后端返回的一个路由json数据，我们通过前端生成符合路由路由静态内容数组的一个数组，然后再通过addRoute进行一个循环添加，我们以此生成动态路由。在登陆时获取后端返回的菜单信息，我们进行菜单的一个循环生成，由此我们的一个动态项目就已经完成。
第二怎样对动态路由和菜单项目进行一个管理。
我们首先可以通过搭建一个组件通过添加路由信息和管理菜单实现二者的动态匹配。我们只需要对路由信息进行一个添加和修改，并和菜单相互间进行匹配，我们便可实现简单的路由挂载。
组件管理
菜单管理
此时将数据提交的后端由后端进行数据保存，我们此时的组件只需要放在views文件夹下，添加路由进行文件加载，我们便可实现路由管理。
第一登陆页面配置。
我们需要在静态文件夹下创建一个menu.json和route.json。两个json文件模拟服务器登录时返回的数据。
我们在登录页面模拟获取数据之后，我们通过菜单的一个方法进行生成菜单，通过路由的方法生成路由数组并进行循环添加，然后执行路由跳转。
第二配置路由初始化内容。我们将route/index.js的路由信息填为空是非常不理智的，而且会报错，因为路由初始化在加载前已经完成。有些页面完全不需要权限便可访问，比如登录、注册、找回密码和404错误，这种不需要权限的页面，我们还是需要将其直接以静态的形式写在route/index.js文件中。
Index初始数据
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue . use ( VueRouter )
const routes = [{
path: '/' , //访问url
name: 'login' , //路由名称
component : () => import ( '@/unitui/pages/Login.vue' ), //加载模板文件
meta: {
show_site: 0 , //是否全屏显示
web_title: "登录" //网站标题
}
},
{
path: '/register' , //访问url
name: 'register' , //路由名称
component : () => import ( '@/unitui/pages/Register.vue' ), //加载模板文件
meta: {
show_site: 0 , //是否全屏显示
web_title: "注册" //网站标题
}
},
{
path: '/forget' , //访问url
name: 'forget' , //路由名称
component : () => import ( '@/unitui/pages/Forget.vue' ), //加载模板文件
meta: {
show_site: 0 , //是否全屏显示
web_title: "找回密码" //网站标题
}
},
{
path: '/404' , //访问url
name: '404' , //路由名称
component : () => import ( '@/unitui/pages/404.vue' ), //加载模板文件
meta: {
show_site: 0 , //是否全屏显示
web_title: "404错误" //网站标题
}
},
]
const router = new VueRouter ({
routes
})
router . beforeEach (( to , from , next ) => {
document . title = to . meta . web_title
console . log ( to );
next ()
})
export default router
第三，关于防止刷新后丢失的问题。我们需要在app.vue文件中的methods方法中定义一个路由生成方法。
示例：
init_route () { //初始化路由，防止刷新丢失
if ( sessionStorage . getItem ( "route_data" ) != null ) { //只有后端已经返回数据的情况下才允许生成
const route_data = JSON . parse ( sessionStorage . getItem ( "route_data" )); //获取路由信息
const data = []; //默认路由数组
for ( let index = 0 ; index < route_data . length ; index ++) { //生成路由信息
data [ index ] = {
path: route_data [ index ]. path , //访问url
name: route_data [ index ]. name , //路由名称
component : resolve =>
require ([ `@/views/ ${ route_data [ index ]. component } ` ], resolve ), //加载模板文件
meta: {
show_site: route_data [ index ]. meta . show_site , //是否全屏显示
web_title: route_data [ index ]. meta . web_title //网站标题
}
};
}
for ( let index = 0 ; index < data . length ; index ++) { //循环添加路由
this . $router . addRoute ( data [ index ]);
}
}
}
在mounted中进行方法调用，防止刷新的时路由丢失，导致发生错误。该方法内容基本和登陆页面的菜单出路由初始内容基本相同，但我们唯一差别的是，我们需要判断登陆所获取的路由信息是否存在，只有在存在的时候及后端已经返回了路由信息，即证明登录成功的时候，我们才会动态添加路由。
第一在刷新之后，默认跳转到path:’*’的一个路由界面中去，此时我们解决方法只需要将path:’*’路由进行一个删除,将其删除就变可正常访问。
第二动态路由跳转时发生Cannot find module xxx错误。
意思是无法加载我们指定的一个vue文件，这是由于route3.0版本后import方式不支持传入变量，此时我们只需要将其改为require方式便可。
我们此次动态vue项目开发已经基本完成，我的开发的项目是基于element-ui进行，那么如果你需要源码参考。可以私信回复unit便可获取。
vue element-ui 左侧菜单栏 el-menu属性实现动态菜单
原文网址： https://www.cnblogs.com/wasbg/p/12696303.html
基于renren-fast开源项目
下边的四个标签使我们常用的，列出来以示区分
在
中需要--:default-active="this.$route.path"。用来绑定路由表
在
中需要--router------或者router=true
在
中的index不可缺少，为必须值，不过此处的index仅为索引，用来让当前元素下的子菜单收缩或释放。每一个submenu的index值只要不一样便可
在
中，index的值不可缺少，就是用这个来进行路由跳转，index的值为跳转的路径
以下是当时测试的时候写的例子(aaa, bb啥的别介意哈 ，)
main-sidebar.vue
保证打开的tab标签不是同一个页面打开
router/index.js
努力到无能为力，拼搏到感动自己。 欢迎大家在下方多多评论。
Vue3+elemetPlus支持动态路由和菜单管理UI框架
内容较多请耐心阅读，你认真读完一定获益匪浅
这是一个基于vuecli+element-plus共同搭建的一个开源vue3动态路由和动态菜单开源框架，总体来说这个项目是非常优秀。你通过使用它直接实现动态路由和菜单管理功能，实现快速开发。支持二级菜单管理和嵌套路由管理。
"element-plus": "^1.0.2-beta.70",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0"
1、unituicli3是一个基于vue3搭建的一个项目，它是 与时俱进 的， 极具时代性，紧跟vue3的脚步 。
2、项目仅仅集成了element-plus和vue-router两个必备的JavaScript库，除此之外没有再集成任何JavaScript库。这也就意味着你可以根据自己的项目需要去安装自己需要的JavaScript库， 避免因为项目集成库过多给你带来烦恼 。
3、强劲的组件管理器，我们为了帮助你实现可视化管理动态路由和菜单，我们内置了《组件管理》功能组件，使 路由和菜单管理可视化 。同时我们为了更好地实现项目管理，在vue2版本的基础上新增了可选json导出功能，让你可以快速实现json数据生成，生成用户权限路由和菜单。
4、美丽的视图框架，我们 内置了一个后台管理UI框架 ，你可以通过使用它实现admin项目的快速生成和搭建。当然你也可以自己搭建自己喜欢的UI框架结构。
5、 更少的干扰 。为了让项目更加纯净，将项目控制权更多的交给开发者，我们新建了unitui文件夹位于src文件夹下用于存放我们内置的部分，为了便于你项目的启动和理解你可以直接将ivews和components文件夹内容清空，重新搭建你的组件，因为这些目录下的文件这些并不重要。
Unituicli3因为《组件管理》而显得强大，因为这是 核心组件 ，将动态路由（添加、删除、修改）、嵌套路由和菜单管理（添加、删除、修改）变得可视化，而且支持json数据生成使前后端间交互变得可能，你只需要将生成的json储存在数据库便可实现权限编辑。
我们虽然尽力减少对开发者的影响，但是做出一些修改是不可避免的。
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import App from './App.vue'
import router from './router'
import '@/unitui/init_route.js'//这是为了实现防止刷新路由丢失
const app = createApp(App)
app.use(ElementPlus)
app.use(router).mount('#app')
// 注册全局组件
import Uicon from './unitui/sub/Uicon.vue'
app.component('Uicon',Uicon)
你如果不是使用elementPlus作为你的UI你可以参考上面内容做出适当修改
这是一个全局注册的图标选择器，你可以在任意组件通过 使用图标选择器，它挂载在main.js文件中，你如不是使用element你需要做出修改，否则可能 影响图标选择的功能使用 。
实际效果
这是一个非常重要的内置组件，它主要用于模拟登录时的操作和信息生成，它会读取位于assets/json/文件夹下的两个json生成菜单和路由信息，json内容模拟后端返回的内容。
其中最重要的是路由的生成，你在登录后路由json信息返回后调用init_route方法，代码如下：
init_route(route_data) {
//依据后端返回的json数据生成路由
const init_route_data = []; //定义一个路由数组储存生成的路由信息
for (let index = 0; index < route_data.length; index++) {
//循环后端返回的json
//循环
if (route_data[index].children != undefined) {
//有children时生成路由数组方法
init_route_data[index] = {
path: route_data[index].path, //路由url
name: route_data[index].name, //路由名
component: () => import(`@/${route_data[index].component}`),
// component: (resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
meta: {
//路由一些附加信息
show_site: route_data[index].meta.show_site, //是否全屏显示
web_title: route_data[index].meta.web_title //网站标题
},
children: [] //嵌套路由
};
for (let i = 0; i < route_data[index].children.length; i++) {
init_route_data[index].children[i] = {
path: route_data[index].children[i].path, //路由url
name: route_data[index].children[i].name, //路由名
component: () => import(`@/${route_data[index].children[i].component}`),
// component:(resolve) => require([`@/views/${route_data[index].children[i].component}`], resolve), //加载后端json描述的vue文件
meta: {
//路由一些附加信息
show_site: route_data[index].children[i].meta.show_site, //是否全屏显示
web_title: route_data[index].children[i].meta.web_title //网站标题
}
};
}
} else {
//没有children时生成路由数组方法
init_route_data[index] = {
path: route_data[index].path, //路由url
name: route_data[index].name, //路由名
component: () => import(`@/${route_data[index].component}`),
// component:(resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
meta: {
show_site: route_data[index].meta.show_site, //是否全屏显示
web_title: route_data[index].meta.web_title //网站标题
}
};
// console.log(index);
}
}
// console.log(init_route_data); //打印生成初始化路由数组
for (let index = 0; index < route_data.length; index++) {
//由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加
this.$router.addRoute(init_route_data[index]); //循环添加数组
}
this.init_menu(); //执行菜单生成方法
},
其他三个你可以随意修改
在vue2动态路由项目之中，在app.vue文件mounted方法中调用路由生成方法，可以实现刷新路由防丢失，但是在vue3中采用同样方式，则会出现异常，原因是我们跳转发生在路由添加前，所以会出现刷新后页面没有内容，所以我们在unitui文件夹下新建init_route.js写下和login.vue文件中路由初始化相似的内容，然后再main.js中引入。
init_route.js内容：
import router from '@/router'
function init_route() {
//依据后端返回的json数据生成路由
if (sessionStorage.getItem("route_data") != null) {
const route_data = JSON.parse(sessionStorage.getItem("route_data"));
// console.log(route_data);
const init_route_data = []; //定义一个路由数组储存生成的路由信息
for (let index = 0; index < route_data.length; index++) {
//循环后端返回的json
//循环
if (route_data[index].children != undefined) {
//有children时生成路由数组方法
init_route_data[index] = {
path: route_data[index].path, //路由url
name: route_data[index].name, //路由名
component: () => import(`@/${route_data[index].component}`),
// component: (resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
meta: {
//路由一些附加信息
show_site: route_data[index].meta.show_site, //是否全屏显示
web_title: route_data[index].meta.web_title //网站标题
},
children: [] //嵌套路由
};
for (let i = 0; i < route_data[index].children.length; i++) {
init_route_data[index].children[i] = {
path: route_data[index].children[i].path, //路由url
name: route_data[index].children[i].name, //路由名
component: () =>
import(`@/${route_data[index].children[i].component}`),
// component:(resolve) => require([`@/views/${route_data[index].children[i].component}`], resolve), //加载后端json描述的vue文件
meta: {
//路由一些附加信息
show_site: route_data[index].children[i].meta.show_site, //是否全屏显示
web_title: route_data[index].children[i].meta.web_title //网站标题
}
};
}
} else {
//没有children时生成路由数组方法
init_route_data[index] = {
path: route_data[index].path, //路由url
name: route_data[index].name, //路由名
component: () => import(`@/${route_data[index].component}`),
// component:(resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
meta: {
show_site: route_data[index].meta.show_site, //是否全屏显示
web_title: route_data[index].meta.web_title //网站标题
}
};
// console.log(index);
}
}
// console.log(init_route_data); //打印生成初始化路由数组
for (let index = 0; index < route_data.length; index++) {
//由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加
router.addRoute(init_route_data[index]); //循环添加数组
}
// 这里放置刷新
// console.log('app');
// const index=window.location.href.lastIndexOf("#")
// const url=window.location.href.substring(index+1,window.location.href.length);
// this.$router.push(url)
}
}
init_route()
在main.js中引用：
import '@/unitui/init_route.js'//这是为了实现防止刷新路由丢失
此时便可完成刷新自动初始化
我们通过在app.vue文件中通过获取路由中meta. show_site的值（0全屏显示，1显示在视图内），然后使用 v-if控制不同router-view的显示来实现显示位置的控制。
App.vue源码：
1、如果你不喜欢我们的ui框架，你需要开发新的ui时，没有ui框架的支持《组件管理》功能可能不能正常显示（显示空白），你可以将unitui/ subadmin/ SubAdmin.vue文件中style部分改为：
#sub_admin_back {
width: 100%;
/* 非ui框架将height写为height: 100vh; */
height: 100vh;
background-size: cover;
position: relative;
background-color: #ffffff;
border-radius: 10px;
}
1、没能尽可能减少对框架的干扰，你仍然需要保持对main.js的适当修改。
vue3 + ts 后台动态路由菜单渲染
1，创建菜单所以对应的页面
2，创建页面所对应的路由
这里使用了一个插件 coderwhy
使用这个命令符可以快速搭建出上述页面
3，创建map-menus.ts文件
然后在你对应想要获取路由表的地方使用map-menus.ts文件中导出的mapMenusToRoutes函数就可以得到路由表，我的首页叫做mian
参考：
然后菜单组件：
数据返回是这样哒：
最后长这样：
使用antd+vue实现动态菜单栏，刷新过后仍然选中，含有二级分类自动展开
这个比较简单 antd的API中提供了一个defaultSelectedKeys参数 在菜单标签中设置 defaultSelectedKeys属性指向this.$route.path即可完成
这时需要用到两个API openKeys 当前展开的 SubMenu 菜单项 key 数组 openChange 展开/关闭的回调
vue+swiper如何实现侧边栏菜单
这次给大家带来vue+swiper如何实现侧边栏菜单，vue+swiper实现侧边栏菜单的注意事项有哪些，下面就是实战案例，一起来看一下。本文实例为大家分享了vue swiper实现侧滑菜单效果的具体代码，供大家参考，具体内容如下 这个左右滑动以及上下滑动主要使用了Swiper的轮播功能，首先是该自定义组件的代码：
该组件自定义了四个属性，分别是左右侧滑菜单的宽度，上下滑动菜单的高度，leftWdith、rightWidth、topHeight、bottomHeight，然后用了一个横向的轮播用来存放左滑菜单，中间内容，右滑菜单，然后在中间内容又放了一个纵向的轮播用来放置上滑菜单，内容以及下滑菜单，具体思路就是这样。在组件挂载的时候，需要根据父组件传入的数值去初始化四个菜单的宽高，初始化完毕宽高之后，还要调用swiper本身的updateSlides更新所有的slides，不然滑动的时候，还是按照没设置之前的宽高进行滑动。在父组件中调用：
left
Content
right
top
bottom
不要忘了在父组件中还要引入这个vue组件。上面是我整理给大家的，希望今后会对大家有帮助。相关文章：AngularJS1.x应用迁移至React（详细教程）在vue 2.0中如何实现购物车小球抛物线在js中getBoundingClientRect有什么作用？
vue实现页面权限中的菜单配置
通过一个数组渲染菜单，实现页面权限的自动配置。
n级菜单有n-1级菜单构成......以此类推可得：多级菜单就是通过二级菜单循环构成。在element-ui中找到 NavMenu 导航菜单 组件，使用该组件做一个二级菜单的循环体组件。菜单数据存储在vuex中。
在组件中判断是否有子集来加载不同的模块。二级菜单内部通过插槽来加载循环生成的一级组件数组，如下 list-item 组件
index属性可以用菜单对象中的任意属性代替只需要它是唯一的
从后台获取不同角色的不同菜单数据，再通过两个递归函数来渲染菜单和动态添加菜单路由，实现页面的权限配置。
https://erpang123.github.io/router-demo/dist-demo/index.html
完整案例： https://github.com/erpang123/router-demo