解决vue2+vue-router动态路由添加及路由刷新后消失问题
作者:白臻
这篇文章主要介绍了解决vue2+vue-router动态路由添加及路由刷新后消失问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
使用的是vue2 +vuex
在http文件下新建api文件 menu.js文件
import { getData } from "@/http/api.js"; import store from "@/store/index.js"; import router from "@/router/index.js"; export const getMenu = () => { return new Promise((resolve) => { var InfoItem = { // JobNumber: system_params.UserName , JobNumber: 10086, DeviceType: "WEB", }; var newInfoItem = JSON.stringify(InfoItem); var InfoList = { A: 7, B: 1, C: 1, // UserId: system_params.UserName, UserId: 10086, Data: newInfoItem, }; getData(InfoList).then((res) => { if (res.Code === 200 || res.Msg === "") { let result = JSON.parse(res.Data); let routeTree = JSON.parse(result.List); store.commit("setUserRouters", routeTree); initRoute(routeTree); console.log(router); resolve(routeTree); } }); }); }; function initRoute(menu) { if (menu && menu.length > 0) { menu.forEach((element) => { let obj = { path: "/" + element.menuUrl, // 仓库管理--仓库 component: () => import(`@/views/stockInfo/wareHouseManage/${element.menuUrl}.vue`), meta: { title: element.menuName, path: "/" + element.menuUrl, }, }; //添加路由 router.addRoute("index", obj); if (element && element.Children && element.Children.length > 0) { return initRoute(element.Children); } console.log("router===>", router); }); } }
在store文件里
import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); // 公共状态 const state = { userRoutes: [], }; const mutations = { setUserRouters(state, payload) { state.userRoutes = payload; }, }; export default new Vuex.Store({ actions, mutations, state, getters, });
获取后台数据
async mounted() { // 从后台获取路由数据 const mRoutes = getMenu(); this.menus = await mRoutes; },
动态路由刷新后消失解决办法
//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用 router.beforeEach((to, from, next) => { if (load === 0) { load++; getMenu(); next({ path: to.fullPath }); } next(); });
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。