vue3实现动态菜单和动态路由和刷新后白屏处理

项目中，当每一个角色得到的界面不一致的时候，我们就不能使用静态菜单了，而是要从后端得到动态的菜单数据，然后动态的将菜单数据展示在界面上。除了在界面展示，也还要将界面的路由动态添加，在路由动态添加之后，你可能会出现刷新界面，界面变白的情况，页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了。这种情况我会在最后给一个处理方法。

bu_xiang_tutou

7285人浏览 · 2023-03-12 19:54:33

bu_xiang_tutou · 2023-03-12 19:54:33 发布

前言：

项目中，当每一个角色得到的界面不一致的时候，我们就不能使用静态菜单了，而是要从后端得到动态的菜单数据，然后动态的将菜单数据展示在界面上。

除了在界面展示，也还要将界面的路由动态添加，在路由动态添加之后，你可能会出现刷新界面，界面变白的情况，页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了。这种情况我会在最后给一个处理方法。

所以这个博客会做两个部分的处理：

动态菜单生成
动态添加路由

动态菜单生成

1.获得后端数据（有mock模拟数据，也可以使用后端接口）

1.1使用mock得到模拟数据

没有下载mock的可以查看：Vue项目中使用mockjs实现mock模拟数据 - ykCoder - 博客园 (cnblogs.com)

mock/modules/menu.js 保存模拟的后端数据

function list(res) {
  // res是一个请求对象，包含: url, type, body
  return {
    code: 200,
    message: "请求成功",
    //菜单数据，可以修改成你自己要的菜单
    data: [
      {
        id: "600d4075e218daaf4ec77e50",
        menuType: "1",
        menuName: "首页",
        path: "/Home",
        icon: "house",
      },
      {
        id: "600d4075e218daaf4ec77e51",
        menuType: "1",
        menuName: "公司管理",
        path: "/company",
        icon: "location",
        children: [
          {
            id: "600d525e602f452aaeeffcd9",
            menuType: "1",
            menuName: "公司资料",
            path: "/company/Company",
          },
          {
            id: "601bc4f8a794e23c2e42efa9",
            menuType: "1",
            menuName: "个人资料",
            path: "/company/Person",
          },
        ],
      },
  };
}

//暴露list
export default { list };

mock/index.js 引入mock/menu.js

// 引入mockjs
import Mock from 'mockjs'
// 引入模板函数类
import menu from './modules/menu'

// Mock函数
const { mock } = Mock

// 设置延时
Mock.setup({
  timeout: 400
})

// 使用拦截规则拦截命中的请求，mock(url, post/get, 返回的数据);
Mock.mock('/mock/menu', 'get', menu.list)

在界面引用

<script>
export default {
  data() {
    return {
      menuData:[],
    };
  },
  methods: {
    getMenu() {
      this.$http.get('/mock/menu').then((res) => {
        console.log(res)
        if (res.data.code === 200) {
          this.menuData = res.data.data;
          // console.log(this.menuData,"menuData")
          //获取菜单的数据，存入store中
          this.$store.commit("setMenu",this.menuData)
          //动态生成路由
          this.$store.commit("addMenu",this.$router)
        }
      })
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};                   
</script>

1.2连接后端接口（统一接口管理），从后端得到菜单数据

如果对统一接口管理，有不明白的可以查看：

016-尚硅谷-尚品汇-API接口统一管理_哔哩哔哩_bilibili

Vue封装接口思路（包括请求（响应拦截器））_vue接口封装_忧郁火龙果的博客-CSDN博客

api/request.js

import axios from 'axios';

//1.利用axios对象的方法create，去创建一个axios实例。
const requests = axios.create({
    //配置对象
    //接口当中：路径都带有/api     基础路径，发送请求的时候，路径当中会出现api
    baseURL:"/api",
    //代表请求超时的时间
    timeout:5000,
})
//请求拦截器：
requests.interceptors.request.use((config) =>{
    //config:配置对象，对象里面有一个属性很重要，header请求头
    return config;
})

//响应拦截器
requests.interceptors.response.use((res)=>{
    //成功的回调函数：服务器相应数据回来以后，响应拦截器可以检测，可以做一些事情
    return res.data;
},(error)=>{
    //失败的回调函数
    return Promise.reject(new Error('faile'));
})

//对外暴露
export default requests;

api/menu.js

import requests from "./request";

export const menuList = (data) => {
  return requests({
    url: "/user/menus",
    method: 'GET',
    data: data,
  });
};

在界面引用

<script>
import { menuList } from "@/api/menu.js";

export default {
  data() {
    return {
      menuData:[],
    };
  },
  methods: {
    getMenu() {
      const id = 1;
      //假数据
      const res = menuList(id);
      console.log(res.data);
      if (res.code == 200) {//获得菜单导航数据
      this.menuData = res;
      } else {//没有获得菜单数据
      }
    },
  },
};                   
</script>

2.接收界面数据，实现动态界面

2.1界面实现

我的菜单界面是用两个vue文件写的。组件间的传值要用vuex，这里建议去看一下官网学习一下。

组件间的传值：Vue组件之间的传值 - 掘金 (juejin.cn)

HomeMenu.vue

这里实现二级菜单用的是递归的方法，这个是我觉得很神奇的地方，我第一次在vue中使用到了递归。在此之前我觉得vue就只能实现做界面的功能，没有想到过vue也可以这么灵活。

<home-menu :menuData="item.children" />//在组件中调用组件本身，使用递归的方法实现二级目录。

全部代码

<template>
  <div>
    <template v-for="item in menuData" :key="item">
      <el-sub-menu
        :index="item.id"
        v-if="
          item.children &&
          item.children.length > 0 &&
          item.children[0].menuType.toString() === '1'
        "
      >
        <template #title>
          <el-icon><component :is="item.icon" /></el-icon>
          <span>{{ item.menuName }}</span>
        </template>
        <home-menu :menuData="item.children" />
      </el-sub-menu>
      <el-menu-item
        @click="clickMenu(item)"
        v-else-if="item.menuType.toString() === '1'"
        :index="item.path"
        :key="item.id"
      >
        <template #title>
          <el-icon><component :is="item.icon" /></el-icon>
          <span>{{ item.menuName }}</span>
        </template>
      </el-menu-item>
    </template>
  </div>
</template>
<script>
export default {
  name: "home-menu",
  //为了实现组件间的传值
  props: ["menuData"],
  methods: {
    //点击菜单
    clickMenu(item) {
      console.log("item:" + item);
      //当前路由与跳转路由不一致时跳转
      if (this.$route.path !== item.path && !(this.$route.path === '/home' && (item.path === '/'))) {
        this.$router.push(item.path);
      }
    },
  },
};
</script>

HomeAside.vue

<template>
  <div>
    <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      default-active="2"
      text-color="#fff"
      @open="handleOpen"
      @close="handleClose"
    >
      <h3>{{ isCollapse ? "排班" : "智能排班系统" }}</h3>
      <home-menu :menuData="menuData"></home-menu>
    </el-menu>
  </div>
</template>
<script>
import HomeMenu from "@/components/menu/HomeMenu.vue";
import { thisTypeAnnotation } from "@babel/types";
import { mapState } from 'vuex';

export default {
  components: {
    "home-menu": HomeMenu,
  },
  data() {
    return {
      menuData:[],
    };
  },
  mounted() {
    //获得菜单
    this.getMenu();
  },
  computed: {
    //给store传递menuData的值
    ...mapState({
      menuData: (state) => state.menu.menuData
    }),
  },
  methods: {
    getMenu() {
      this.$http.get('/mock/menu').then((res) => {
        console.log(res)
        if (res.data.code === 200) {
          this.menuData = res.data.data;
          // console.log(this.menuData,"menuData")
          //获取菜单的数据，存入store中
          this.$store.commit("setMenu",this.menuData)
          //动态生成路由
          this.$store.commit("addMenu",this.$router)
        }
      })
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};                   
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu {
  height: 100vh;
  border-right: none;
  h3 {
    color: #fff;
    text-align: center;
    line-height: 48px;
    font-size: 16px;
    font-weight: 400px;
  }
}
</style>

2.2组价间传值的使用

store/menu.js 这里的addMenu函数值实现动态路由的关键，在下面会有分析

export default {
  state: {
    // 动态菜单
    menuData: [],
  },
  //修改字段
  mutations: {
    //设置菜单的数据
    setMenu(state, val) {
      state.menuData = val;
    },
    //动态注册路由
    addMenu(state, router) {
      // 处理动态路由的数据
      const menuData = JSON.parse(JSON.stringify(state.menuData));
      const menuArray = [];
      menuData.forEach((item) => {
        if (item.children && item.children.length >= 1) {
          menuArray.push(...item.children);
        } else {
            menuArray.push(item);
        }
      });
      console.log(menuArray, "menuArray");
      // 路由的动态添加
      if (menuArray[0] !== "") {
        menuArray.forEach((item) => {
          router.addRoute("main", { path: `${item.path}`,component: () => import(`@/views${item.path}.vue`) });
        });
      }
    },
  },
};

menu/index.js

import { createStore } from 'vuex'
import createPersistedState from "vuex-persistedstate"
import menu from './menu'


export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    menu
  },
  /* vuex数据持久化配置 */
  plugins: [
    createPersistedState({
      // 存储方式：localStorage、sessionStorage、cookies
      storage: window.sessionStorage,
      // 存储的 key 的key值
      key: "store",
      reducer(state) { //render错误修改
        // 要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据
        return { ...state };
      }
    })
  ]
})

3.实现动态路由

3.1实现动态路由的代码分析

上面的代码已经实现了动态路由，这里是解释一下动态路由的关键上面，网上关于动态路由的代码很多，但是对于第一次做动态路由的人来说，想要去看懂事有点难度的。

创建一个新的空数组，遍历menuData的时候根据元素有没有children来分别处理，将需要的数据保存到新数组中，通过传入的path路径来添加路由。

最重要的部分来了，vue router4的版本不再使用router.addRoutes而是router.addRoute，这个地方建议看官方文档

动态路由 | Vue Router (vuejs.org)

 router.addRoute("main", { path: `${item.path}`,component: () => import(`@/views${item.path}.vue`) });

//动态注册路由
    addMenu(state, router) {
      // 处理动态路由的数据
      const menuData = JSON.parse(JSON.stringify(state.menuData));
      const menuArray = [];
      menuData.forEach((item) => {
        if (item.children && item.children.length >= 1) {
          menuArray.push(...item.children);
        } else {
            menuArray.push(item);
        }
      });
      console.log(menuArray, "menuArray");
      // 路由的动态添加
      if (menuArray[0] !== "") {
        menuArray.forEach((item) => {
          router.addRoute("main", { path: `${item.path}`,component: () => import(`@/views${item.path}.vue`) });
        });
      }
    },

下面贴一下vue2项目的写法，这里我使用时先把元素中添加component属性，这里和上面的写法有点不一样，但是我建议还是用上面的好一点，这个写法可能会出bug。

item.component =  (resolve) => require([`@/views/home/${item.url}`], resolve)

//动态注册路由
        addMenu(state, router) {
            // 处理动态路由的数据
            const menuArray = []
            state.menuData.forEach(item => {
                if (item.children) {
                    item.children = item.children.map(item => {
                        item.component = (resolve) => require([`@/views/home/${item.url}`], resolve)
                        return item
                    })
                    menuArray.push(...item.children)
                } else {
                    item.component =  (resolve) => require([`@/views/home/${item.url}`], resolve)
                    menuArray.push(item)
                }
            })
            console.log(menuArray, 'menuArray')
            // 路由的动态添加
            menuArray.forEach(item => {
                router.addRoute('main', item)
            })
        },

还有一个处理方法，你可以在传过来的数据中就传path，component的值，最后直接使用

router.addRoute() 调用就行了。

在HomeAside.vue界面之间的引用

//获取菜单的数据，存入store中
this.$store.commit("setMenu",this.menuData)
//动态生成路由
this.$store.commit("addMenu",this.$router)

3.2刷新界面后，白屏处理

恭喜你，来到最后一步，在最前面的时候说过，白屏问题是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了。我在网上找了很多方法都没有解决，最后回归到问题的本质，刷新界面vuex的数据会丢失，那么我们不让数据丢失不就行了，我的处理方法是在

mian.ts中再保存一遍路由的数据。

这个是vue3的处理：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as ElIconModules from "@element-plus/icons";

import '@/mock';
import axios from 'axios';
import VueAxios from 'vue-axios';

//动态菜单路由的生成
const addMenu = () => {
  store.commit("addMenu",router)
}
addMenu()

const app = createApp(App);
app.use(store).use(router).use(ElementPlus).use(VueAxios,axios).mount("#app");

// 统一注册Icon图标
for (const iconName in ElIconModules) {
  if (Reflect.has(ElIconModules, iconName)) {
    const item = ElIconModules[iconName];
    app.component(iconName, item);
  }
}

这个是vue2的处理：

import Vue from 'vue';
import router from './router'
import store from './store'
import App from './App.vue'


import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);

import axios from 'axios'
//配置请求根路径
axios.defaults.baseURL = "http://localhost:8088"                                 
//将axios作为全局的自定义属性，每个组件可以在内部组件访问
Vue.prototype.$http = axios

//添加全局前置导航守卫
router.beforeEach((to, from, next) => {
  //判断token是否存在
  // localStorage.setItem("token", message.data.token);
  const token = localStorage.getItem("token");
  // localStorage.clear();
  console.log(token,'token')
  if( !token && to.name !== 'login' ){//token不存在，没有登录
      next({ name : 'login' })
  } else {
    next();
  }
})

new Vue({
  router,
  store,
  el: '#app',
  created() {
    store.commit('addMenu',router)
  },
  render: h => h(App)
});

好了，最后希望大家都能看懂，如果有什么问题可以提出来。