主要使用Vue3与Element UI,在项目开发中可能会遇到从后端取得数据,到前端去渲染菜单,从而实现动态路由与动态菜单。
代码如下:
{{ menu.authname }}
{{ item.authname }}
代码如下:
首页
{{this.$store.state.Breadcrumb_title}}
{{this.$store.state.Breadcrumb.title}}
代码如下:
index.js代码如下:
import { createRouter, createWebHistory } from 'vue-router'
import store from '@/store';
const routes = [//初始静态路由
{
path: '/',
name: 'login',
component: () => import('@/views/Login.vue'),
},
{
path: '/index',
name: 'Homepage',
component: () => import('@/views/Homepage.vue'),
redirect: '/index/Home',
children: [{
path: 'Home',
name: 'Home',
component: () => import('@/views/Home.vue'),
}]
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
var tag = true;//设置全局变量
//路由拦截
router.beforeEach(async (to, form, next) => {
//第一次登录时,全局变量为true执行,第二次刷新,再次执行
if (tag) {
tag = false;
if (to.name === 'login') {
next()
} else {
let Routers = store.state.Routers;
addRoutes(Routers);
next(to.path);
}
} else {
next()
}
})
//添加路由的方法
export function addRoutes(res) {
res.forEach((Router, index) => {
router.addRoute({
path: Router.path,
name: Router.name,
component: () => import('@/views/' + Router.name + '.vue'),
})
let childrens = Router.children;
if (childrens != undefined) {
for (let i = 0; i < childrens.length; i++) {
if (childrens[i] != undefined) {
router.addRoute('Homepage', {
path: childrens[i].path,
name: childrens[i].name,
component: () => import('@/views/' + childrens[i].name + '.vue')
})
}
}
}
})
}
export default router
index.js代码如下:
import { createStore } from 'vuex';
import router from '@/router';
export default createStore({
state: {
Routers: '',//登录获取的全部路由
setAsyncRoutestMark: 'false',
TabseditableTabsValue: 'Home',//当前选中Tab的名字
Breadcrumb_title: '员工管理',//菜单栏标签
//全部标签
Tabs: [
{
title: '员工信息表',
name: 'Home',
path: '/index/Home',
}
],
//选中的标签
Breadcrumb: {
title: '员工信息表',
name: 'Home',
path: '/index/Home'
}
},
getters: {
getTabs: state => {
return state.Tabs;
},
getRouters: state => {
return state.Routers;
}
},
mutations: {
//添加tabs路由
setTabRouter(state, data) {
state.Tabs.push(data)
},
// 删除tabs路由
delTabRouter(state, data) {
let index = 0;
for (let option of state.Tabs) {
if (option.path == data) {
break
}
index++
}
state.Tabs.splice(index, 1);
// 删完路由后也要保存到session中
// sessionStorage.setItem('Tabs', JSON.stringify(state.Tabs))
},
// 设置当前激活的tabs
setActiveIndex(state, index) {
state.TabseditableTabsValue = index
state.Breadcrumb.name = index;
},
},
actions: {
},
modules: {
}
})
1. 路由守卫判定当初次登录时,后端返回路由数据,处理完数据放进vuex存起来。
2.(1)菜单组件去获取vuex的路由数据,进行处理形成自己需要的菜单数据并进行渲染。
(2)标签页组件去vuex获取Tabs数据,进行渲染。
(3) 面包屑直接从vuex里获取数据,进行渲染。
3. 操作(1)当子菜单栏被点击时,在vuex(即store)里面添加Tab数据,同时标签页、面包屑实时渲染。
操作(2)当标签页被删除时,在vuex里删除其数据,同时选中上一次点击的子菜单栏和标签页,面包屑也跟着变化
操作(3) 切换标签,动态菜单跟着切换选中
4. 当路由守卫判定不为初次登录时,则被认为是在刷新,则从sessionStorage缓存中找到数据赋值给store,重新渲染路由,使页面不为空白