vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue2+vue-router动态路由添加及路由刷新后消失

解决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();
  
});

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文