vue3:菜单、标签页和面包屑联动效果

文章目录

- 1.整体思路
- 2.实现过程

概要

提示：这里可以添加技术概要

例如：

openAI 的 GPT 大模型的发展历程。

1.整体思路

在之前做的后台项目中，菜单、标签页和面包屑之间的联动，自己都是通过在路由前置守卫中，定义bus总线程通过.emit 和 .on 发送拿取需要的数据，然后再做一些自己想要的处理，实现自己想要的结果，后面在修改项目的时候就想要一中比较方便的办法，抛弃了通过bus总线程实现的方法。选择通过状态管理stroe来存储当前的路由信息控制三者的联动效果。

2.实现过程

1.创建你的组件文件，nav:菜单、header:面包屑、tabs：标签页,然后先把自己的基础页面信息。

2.将这些组件引入到view->index文件中

页面整体效果

2.创建store文件: index.ts 、user.ts 文件名字自己随便取,后面需要引入的时候不要把名称写错了

store //我习惯了命名 store ，实际可以取名 pinia 因为用到的组件库就是这个

* index

* user

index.ts

import {createPinia} from 'pinia'
let pinia= createPinia()
export default pinia

user.ts

import {defineStore} from 'pinia'
const useCounterStore = defineStore('appStore',{state :()=> ({menuiIsCollapse : false , //menu导航栏是否为展开NavList: [],  //menu导航栏的数据TabsList:[], //标签页的显示数据NowRouterPath :'' //当前路由}),actions : {//菜单栏的缩放updataMenuWidth(status:boolean){this.menuiIsCollapse = statusthis.menuiIsCollapse ? document.documentElement.style.setProperty('--el-aside-width', '64px') : document.documentElement.style.setProperty('--el-aside-width', '220px')},//第一次进入网站获取nav导航栏信息oneSetMenuList (obj:any | []){this.NavList = obj},//获取当前的路由信息getNowRouterPath(path:object){this.NowRouterPath = path.fullPaththis.screenTabsList(path)},//筛选tabs的数据显示 不存在就添加到 TabsList 中 screenTabsList(to_data:object){if(this.TabsList.length == 0){this.TabsList.push(to_data)}else{if(!this.TabsList.some(item => item.fullPath == to_data.fullPath)){this.TabsList.push(to_data)}}}},
})export default useCounterStore

3.创建router.ts文件,在src目录下新建router文件夹 - > 新建index.ts文件

import  { createRouter ,createWebHashHistory , createWebHistory } from "vue-router";
import pinia from '@/store'
import useUserStore from "@/store/user";
import { inject } from "vue";//必须 否则下面使用 _store 会报错 
useUserStore(pinia)const routes = [你自己的菜单数据]const router = createRouter({history : createWebHashHistory(),routes
})//前置路由守卫
router.beforeEach((to, from, next) => {//调用 store  在mian.ts中定义const _store = inject('store')//将当前路由信息传递给store->user.ts中的方法_store.getNowRouterPath(to)const isAuthenticated = checkIfUserIsAuthenticated();if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {next({ name: 'login' });} else if (to.name === 'login' && isAuthenticated) {next({ name: 'index' });} else {next();}
});
function checkIfUserIsAuthenticated() {// 检查本地存储中的认证状态const isAuthenticated = localStorage.getItem('isAuthenticated');// 如果认证状态为true，则返回true；否则返回falsereturn isAuthenticated === 'true';
}
export default router

没有注册userUserStore出现的错误，大概意思就是当前没有组件生产，拿取不到Mian.ts中注册的pinia：

附上mian.ts文件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import './assets/css/global.less';
import { createPinia } from "pinia";
import bus from "./mitt";
import useCounterStore from "@/store/user";
import { storeToRefs } from 'pinia';
const pinia = createPinia();const store = useCounterStore()
const storerefs = storeToRefs(store)//模拟数据
import { mockXHR } from "./mock/index";
mockXHR()const app = createApp(App)for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}app.use(pinia)
app.use(router)
app.use(ElementPlus)//VUE提供了provide 和 inject来解决了这个问题。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。app.provide('store_state', storerefs) //拿取到的pinia的state
app.provide('store', store) //拿到的整个pinia
app.provide('bus', bus) app.mount('#app')

4.菜单文件 nva->index.vue

<script lang="ts" setup>
import { onMounted, reactive, ref ,watch,inject} from "vue";
import { useRoute } from "vue-router";
import { get } from "../../axios/api";
import bus from "@/mitt";
const isCollapse = ref(true);
const router = useRoute();
let nowRouter = ref("");
let NavList = ref([]);
let childPath = ref([]);const store = inject('store')
const store_state = inject('store_state')//监听当前路由信息的变化 newVlaue是新值 ,vlaue 是变化之前的旧值
watch(()=>store_state.NowRouterPath.value,(newValue,value)=>{//判断当前的菜单数据信息中，是否包含新的路由数据，nowRouter赋值为新的路由,nav就会选中高亮显示NavList.value.map((item) => {newValue.indexOf(item.fullPath) == -1? item.children.map((child: any) => {nowRouter.value = newValue;router.fullPath.indexOf(newValue) !== -1 ? (nowRouter.value = newValue) : "";}): "";});
})onMounted(() => {
//这个只是判断请求的nav数据是否存在本地中，存在就不请求接口了if(sessionStorage.getItem('NavList')){NavList.value = JSON.parse(sessionStorage.getItem('NavList')) getNowPath()}else{getNavList()}
});//函数const getNavList = ()=>{let params = {token: localStorage.getItem("token"),};get("/api/getMenuList", params).then((res) => {NavList.value = res.data;store.oneSetMenuList(NavList);sessionStorage.setItem('NavList',JSON.stringify(NavList.value))getNowPath()});
}
const ClickToGo = (data)=>{}const getNowPath = () =>{NavList.value.map((item) => {item.children.length !== 0? item.children.map((child: any) => {childPath.value.push(child.path);}): childPath.value.push(item.path);});childPath.value.map((item) => {if (router.path.indexOf(item) !== -1) {nowRouter.value = item;}});
}
</script>
<template><el-menuclass="el-menu-vertical-demo":collapse="store_state.menuiIsCollapse.value":unique-opened="true":router="true" //为true的话，可以根据点击菜单中绑定的index是'/index'定义的路由，可点击直接跳转:default-active="nowRouter"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><template v-for="(item, index) in NavList"><el-sub-menu v-if="item.children.length !== 0" :index="item.id"><template #title> //下拉菜单 <el-icon><component :is="item.web_icon" /></el-icon><span>{{ item.title }}</span></template>  //点击跳转菜单<el-menu-item-group v-for="(children, k) in item.children"><el-menu-item :index="children.path" @click="ClickToGo(children)">{{ children.title }}</el-menu-item></el-menu-item-group></el-sub-menu><el-menu-item v-else :index="item.path"><el-icon><component :is="item.web_icon" /></el-icon><template #title>{{ item.title }}</template></el-menu-item></template></el-menu>
</template>
<style scoped lang="less">
</style>

5.tab组件

<template><div class="container" ><el-tabsv-model="editableTabsValue"type="card"closable@tab-remove="removeTab"@tab-click="getRouter"><el-tab-panev-for="(item, index) in editableTabs":key="index":label="item.meta.name":name="item.fullPath"></el-tab-pane></el-tabs></div>
</template>
<script lang="ts" setup>
import { defineComponent, ref, onMounted ,inject,watch} from "vue";
import bus from "@/mitt";
import { useRouter } from "vue-router";const store = inject('store')const store_state = inject('store_state')//直接赋值为当前的路由 editableTabsValue 对应到 el-tab-pane中的：name 如果相同就会自动高亮显示let editableTabsValue = store_state.NowRouterPath;//pinia中保存的 tabs数据const editableTabs = store_state.TabsList// 页面加载时执行onMounted(() => {});// 移除选项卡const removeTab = (targetName: string) => {};// 点击选项卡const getRouter = (i: any) => {};
</script>

6.header 面包屑组件

<template><div class="header-box"><div class="header_item"><el-breadcrumb separator="/" class="header_left_title"> <el-breadcrumb-item :to="{ path: '/home' }">主页</el-breadcrumb-item><el-breadcrumb-item>{{ titleList.Pname }}</el-breadcrumb-item><el-breadcrumb-item v-if="titleList.name">{{titleList.name}}</el-breadcrumb-item></el-breadcrumb></div></div>
</template> 
<script  setup lang="ts">
import { onMounted, defineProps, provide, inject ,watchEffect ,watch} from "vue";
import { useRouter, useRoute } from "vue-router";
import { ref, reactive } from "vue";const router = useRoute();//面包屑显示数据let titleList = reactive({ Pname: "", name: "" });const store = inject('store')const store_state = inject('store_state')onMounted(() => {//拿取router 路由信息getMenuList(router.path);});//监听当前路由的信息变化
watch(()=>store_state.NowRouterPath.value,(newValue,value)=>{getMenuList(newValue);
})function getMenuList(path) {
//path:当前路由 ； 拿到nav菜单数据，对比是否能找到path对应的菜单信息，let menuList = JSON.parse(sessionStorage.getItem('NavList')) menuList.map((item) => {if (item.path !== path) {//判断是否存在children 可点击菜单item.children.length !== 0? item.children.map((child) => {//存入 下拉菜单的名称 和 筛选出的点击菜单名称if (child.path == path) {titleList.Pname = item.title;titleList.name = child.title;}}): "";} else {titleList.Pname = item.title;titleList.name = "";}});
}

如有写的不明确的地方可以提出来，或者大佬们有更好的方法。