效果图：
home.vue页面代码
大可的管理系统 - v1.0
退出登录© 版权所有： 大可
import { ref } from 'vue';import { useRouter } from "vue-router";import left from "../left.vue";importtab from '../tab.vue';import { ElMessage, ElMessageBox} from "element-plus";import { useAuthStore } from '@/store';import preventBack from 'vue-prevent-browser-back';//组件内单独引入const mixins = [preventBack];const store = useAuthStore();const collapse = ref(false)const router = useRouter();const tiao = () => {console.log('路由')router.push('/son1')}const fff = () => {router.replace('/son2')}const collapseToggle = () => {collapse.value = !collapse.value}const ggvv= ref([1,2,3])const handleOpen = () => {console.log()}const gg = (e) => {console.log(e)}const handleClose = () => {console.log()}const LogOut = () => {ElMessageBox.confirm('确定要退出登录" />left.vue页面代码
import { ref, defineProps } from 'vue';import { useAuthStore } from '@/store';type HeaderProps = {dataToSon: number[];};// 2. type 声明的HeaderProps 用 defineProps注册const zz = defineProps();const hhkk = zz.dataToSon;const list = ref>([]);const store = useAuthStore();const gg = () => {}tab.vue页面代码
import { ref, onMounted } from 'vue'import {useAuthStore} from '@/store';import {useRouter} from "vue-router";const store = useAuthStore();const router = useRouter();onMounted(() => {// store.bbc = router.currentRoute._value.fullPath;})const fv = store.bbc;const jj = (e) => {// router.replace(e.props.name)console.log(e)}const hh = (ee) => {console.log(ee)}let tabIndex = 2const editableTabsValue = ref(store.zx.length)const ff = store.zx;const gg = (e) => {ff.forEach(item => {if (item.path == e) {ff.splice(item,1)}})}.demo-tabs > .el-tabs__content {padding: 32px;color: #6b778c;font-size: 32px;font-weight: 600;}pinia里面的代码
import { defineStore } from 'pinia';export default defineStore('auth',{ state: () => { return { loginName: "张三", ss: [], mm: [ { path: 'vv', name:'首页', func_fid: 0, id:"1000", children: [ { path: 'sy', name:'首页儿子', func_fid: 1000, id:"1212", } ] }, { path:'hh', name:'系统管理', func_fid: 0, id: '1', children: [ { id: '1', func_fid: 1, path:'son1', name: '系统管理儿子', }, { id:' 2', func_fid: 1, path:'hhh', name: '系统管理-角色', children: [ { id: '222', func_fid: 1, path: 'son1-1-1', name: '角色管理', children:[ { id: '12', func_fid: 2, path: 'son1-1-1', name: '角色管理儿子', children:[ { id:' 122', func_fid: 2, path: 'son1-1-1', name: '角色管理儿子-----孙子', } ] } ] } ] }, { id: '12', path: 'son1-2', name: '用户管理' } ] }, { path:'ss', name:'教学管理', id: '22', func_fid: 0, children: [ { path:'son2', name:'教学管理儿子', id: '202', func_fid: 22, } ] }, { path:'zz', name:'行政管理', id: '3', func_fid: 0, children: [ { path:'son3', name:'行政管理儿子', id: '33', func_fid: 3, } ] }, ], zx:[], bbx:[], bbc: '', } },persist: {enabled: true, // 开启缓存默认会存储在本地localstoragestorage: sessionStorage, // 缓存使用方式paths:[] // 需要缓存键},actions: { zz(ss:string) { this.loginName = ss }, vv(e) { let hh = []; function traverse(node) { hh.push(JSON.parse(JSON.stringify(node))) if (node.children && node.children.length > 0) { for (let i = 0; i { traverse(item) }) const bb =[] hh.forEach(item => {if (item.path == e) {const index = this.zx.findIndex(i => JSON.stringify(i) === JSON.stringify(item));this.bbc = item.path;if (index === -1) {this.zx.push({...item})}} }) },kk(e) {let i = this.zx.findIndex(item => item.path === e);if(e != this.bbc) {} //删除的是一个不激活的tab那么就什么都不做else if (this.zx.length === 1) //删除的是最后剩下的一个激活的tabthis.bbc = '';else if (i === this.zx.length - 1) //删除的是最末尾的一个tab，让前面那个激活this.bbc = this.zx[i - 1].path;else //删除的是中间的一个激活的tabthis.bbc = this.zx[i + 1].path;this.zx.splice(i, 1);},}})安装
yarn add pinia-plugin-persistedstateornpm ipinia-plugin-persistedstate
使用插件在main.ts中注册
import { createApp } from "vue";import App from "./App.vue";import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'const pinia = createPinia();pinia.use(piniaPluginPersistedstate);createApp(App).use(pinia);路由代码
// import {createRouter, createWebHistory, createWebHashHistory} from "vue-router";// // 1. 配置路由// const routes: ({ redirect: string; path: string } | { path: string; component: () => Promise } | { path: string; component: () => Promise; children: ({ path: string; components: { son2: () => Promise } } | { path: string; components: { son3: () => Promise } })[] } | { path: string; components: { son1: () => Promise }; name: string; props: { son1: boolean } })[] = [// {path: '/', redirect: '/login'},// {path: '/login', component: () => import('../views/login.vue')},// {// path: '/home',// component: () => import('../views/home/home.vue'),// children: [// // {path: 'son1', name: 'son1', components: {son1: () => import('../views/home/son/son1.vue')}},// {path: 'son2', components: {son2: () => import('../views/home/son/son2.vue')}},// {path: 'son3', components: {son3: () => import('../views/home/son/son3.vue')}},// ]// },// {// path: '/son1',// name: 'son1',// components: {son1: () => import('../views/home/son/son1.vue')},// props: { son1: true }// }//// ];// // 2.返回一个 router 实列，为函数，配置 history 模式// const router = createRouter({// history: createWebHashHistory(),// routes,// });////// // 3.导出路由 去 main.ts 注册 router.ts//// export default routerimport { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(),routes: [{path: '/', redirect: '/login'},{path: '/login', component: () => import('../views/login.vue')},{path: '/home',component: () => import('../views/home/home.vue'),children: [{path:'',components: {son1: () => import('../views/home/son/son1.vue'),son2: () => import('../views/home/son/son2.vue'),son3: () => import('../views/home/son/son3.vue'),sy:() => import('../views/home/son/sy.vue'),}},]},]})export default router我把代码放git上了，有需要的自行拉取
https://gitee.com/Flechazo7/vue3.git