动态路由(上)

配合动态路由的菜单(理论上可无限递归)

<!-- 父组件  -->
<template><div class="menu"><el-menubackground-colortext-coloractive-text-color:router="true"unique-opened="false":collapse="isCollapse":collapse-transition="false":default-active="$route.path"><NestedMenu :menusList="menus[0].children"></NestedMenu></el-menu></div>
</template><script setup lang='ts'>
import { inject, ref, watch, onMounted,PropType} from 'vue';
import { Location, Document, Menu as IconMenu, Setting } from '@element-plus/icons'
import NestedMenu from './NestedMenu.vue'
import {useStore} from '../../store/index';
import { Entity } from '../../global';
const isCollapse = ref(false);
const activePath = ref();
const select = () => {}const menus = useStore().getMenus
</script><style scoped lang="css">
.menu{
background-color: rgb(255, 255, 255);
}
</style>

上述代码是父组件，也是直接配合预定义的前端布局放置的组件，是在编写配合后端鉴权的动态路由时编写的，其中NestedMenu将实现对未知菜单级数的递归，下面的代码将展示子组件即NestedMenu

<!-- 子组件 -->
<template ><template v-for="(item, index) in menusList" :key="item.menuId"><el-sub-menuclassv-if="item.children && item.children.length > 0":index="item.path":key="index"><template #title><span style="color: black;" slot="title">{{ item.menuName }}</span></template><el-menu-item-group><nested-menu :menusList="item.children"></nested-menu></el-menu-item-group></el-sub-menu><el-menu-item v-else :index="item.menuUrl" :key="item.menuId"><template #title><span style="color: black">{{ item.menuName }}</span></template></el-menu-item></template>
</template><script setup lang="ts">
import { ref, PropType, computed, inject, Ref, onMounted, reactive } from 'vue'
import NestedMenu from './NestedMenu.vue';
import { Entity } from '../../global';
import { log } from 'console';
const props = defineProps({menusList: {type: Array as PropType<Entity.RouterEntity[]>,default: () => []}
})
</script>

以下定义的是路由对象实体，其中内容和路由表像映射

export namespace Entity{export interface RouterEntity{menuId: numbermenuName: stringmenuUrl: stringmenuStatus: stringchildren: RouterEntity[]}
}

我们通过后端完成鉴权登录后在，将后端返回的相应权限信息通过Pinia保留其状态，但是不以明文状态存储于浏览器本地，而是保留鉴权的token，放置在浏览器中，通过每次请求放入请求头，依赖于后端Spring Security 框架进行鉴权拦截，而前端则是通过路由守卫搭配上述菜单内容进行拦截鉴权。下文将详述如何使用路由守卫进行鉴权拦截。

vue3.0+typescript+element-plus+vue-router4+Pinia之动态路由(下)

来自一枚rookie的项目开发——vue3.0+typescript+element-plus+vue-router4+Pinia之动态路由（上）相关推荐

来自一枚rookie的项目开发——vue3.0+typescript+element-plus+vue-router4+Pinia之动态路由（下）
路由守卫结合JWT token鉴权控制路由跳转 Pinia使用 import { defineStore } from 'pinia' import { Entity } from '../globa ...
来自一枚rookie的项目开发——vite下的vue3+ts的项目打包及部署
Vite下Vue3.0+Typescript项目打包正常的打包操作 npm run build // package.json ..."scripts": {"dev& ...
来自一枚rookie的项目开发——Nginx Centos 8 or 7 下载安装
Nginx Centos 8 or 7 下载安装下载 wget http://nginx.org/download/nginx-版本号.tar.gz 解压 tar -zxcf nginx-版本号.t ...
来自一枚rookie的项目开发——zookeeper启动失败
腾讯云轻量级服务器Centos8 启动Zookeeper失败 [root@VM-0-16-centos bin]# ./zkServer.sh start /usr/bin/java ZooKeepe ...
vue3.0 结合element ui 开发后台ui框架
vue3.0 结合element ui 开发后台ui框架,根据element ui 官网步骤安装出现报错信息,解决方法: 按照element UI官网步骤, 启动vue 3.0项目:npm run s ...
Vue3.0 + typescript 高仿网易云音乐 WebApp
Vue3.0 + typescript 高仿网易云音乐 WebApp 前言 Vue3.0 的正式发布,让我心动不已,于是尝试用 vue3 实现一个完整的项目,整个项目全部使用了 composition ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
vue3.0 + typescript openlayers实现地图标点.移动.画线.显示范围.测量长度.测量面积.画三角形.画正方形.画圆.线选.画笔.清除测量.清除地图所有等功能由于最近项目中用 ...
Vue3.0+TypeScript+Vite
Vue3.0 + TypeScript + Vite Vue3.0+TypeScript+Vite 项目创建(推荐使用yarn包管理器) 项目结构 main.ts App.vue: Compositi ...

来自一枚rookie的项目开发——vue3.0+typescript+element-plus+vue-router4+Pinia之动态路由（上）

动态路由(上)

配合动态路由的菜单(理论上可无限递归)

来自一枚rookie的项目开发——vue3.0+typescript+element-plus+vue-router4+Pinia之动态路由（上）相关推荐

最新文章

热门文章