vue2+vue-router动态路由添加及路由刷新后消失的解决办法
vue-router动态路由添加及路由刷新后消失的解决办法
·
使用的是vue2 +vuex
1.在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);
});
}
}
2.在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,
});
3.获取后台数据
async mounted() {
// 从后台获取路由数据
const mRoutes = getMenu();
this.menus = await mRoutes;
},
4.动态路由刷新后消失解决办法
//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
if (load === 0) {
load++;
getMenu();
next({ path: to.fullPath });
}
next();
});
更多推荐
已为社区贡献1条内容
所有评论(0)