实现一个面包屑功能,菜单高亮,title及时展示功能

在每个页面的create跟activated函数中去实时判断,根据当前路由的信息,去拿路由表中配置的meta对象里面的title,menuId,可以封装一个mixin然后在每个涉及到路由配置的界面都引入,从而来实现这个效果,从而实现下面的这三个功能

面包屑功能的实现

computed: {
    ...mapGetters("Crumbs", ["getCrumbs"]),
},
<el-breadcrumb-item>{{ getCrumbs() }}</el-breadcrumb-item>

document.title及时更新的实现

菜单高亮功能的实现

使用如下属性实现高亮

<el-menu :default-active="getMenuActive() || '1'">

使用mixin

mixins: [titleMixin],

titleMixin.ts功能文件

import store from "@/store";

function getTitle(vm: any) {
    return vm.$router.currentRoute.value.meta.title;
}

function getMenuActive(vm: any) {
    return vm.$router.currentRoute.value.meta.menuId;
}
// 回退后菜单颜色残留
function getFocus() {
    const el = document.getElementById('focus');
    if (el) {
        el.focus();
    }
}

export const titleMixin = {
    created() {
        const title = getTitle(this);
        document.title = title ? title + ' - 面试系统' : '面试系统';
        store.dispatch("MenuActive/updateState", getMenuActive(this));
        if (title === '首页') {
            store.dispatch("Crumbs/updateState", '');
            return;
        }
        store.dispatch("Crumbs/updateState", title);
        getFocus();
    },
    activated() {
        const title = getTitle(this);
        document.title = title ? title + ' - 面试系统' : '面试系统';
        store.dispatch("MenuActive/updateState", getMenuActive(this));
        if (title === '首页') {
            store.dispatch("Crumbs/updateState", '');
            return;
        }
        store.dispatch("Crumbs/updateState", title);
        getFocus();
    }
}

crumbs文件

interface CrumbsState {
    crumbs: string;
}

const state: CrumbsState = { crumbs: '' };

const getters = {
    getCrumbs: (state: CrumbsState) => () => {
        return state.crumbs;
    }
}

const actions = {
    updateState(context: any, payload: string) {
        context.commit('updateState', payload);
    }
}

const mutations = {
    updateState(state: CrumbsState, payload: string) {
        state.crumbs = payload;
    }
}

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
}

menu-active.ts文件

interface menuActiveState {
    menuActive: string;
}

const state: menuActiveState = {
    menuActive: '1'
}

const getters = {
    getMenuActive: (state: menuActiveState) => () => {
        return state.menuActive;
    }
}

const actions = {
    updateState(context: any, payload: string) {
        context.commit('updateState', payload);
    }
}

const mutations = {
    updateState(state: menuActiveState, payload: string) {
        state.menuActive = payload;
    }
}

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
}

模块化index文件

import { createStore } from 'vuex';
import Crumbs from "./modules/crumbs";
import MenuActive from "./modules/menu-active";

export default createStore({
  modules: {
    Crumbs,
    MenuActive
  }
})