解决vue2+vue-router动态路由添加及路由刷新后消失问题

 更新时间:2024年08月16日 10:25:57   作者:白臻  
这篇文章主要介绍了解决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();
  
});

总结

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

相关文章

  • 浅谈VUE uni-app 模板语法

    浅谈VUE uni-app 模板语法

    这篇文章主要介绍了uni-app 的模板语法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • 如何解决.vue文件url引用文件的问题

    如何解决.vue文件url引用文件的问题

    这篇文章主要介绍了解决.vue文件url引用文件的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vue中使用echarts制作圆环图的实例代码

    vue中使用echarts制作圆环图的实例代码

    这篇文章主要介绍了vue中使用echarts制作圆环图的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • Vue实现Word/Excel/PDF文件预览的详细步骤

    Vue实现Word/Excel/PDF文件预览的详细步骤

    vue-office是一款专门为 Vue 设计的办公文档预览组件库,支持 ​​Word(.docx),Excel(.xlsx/.xls),PDF​​ 等主流格式,下面我们就来看看具体实现步骤吧
    2025-07-07
  • vue中jsonp插件的使用方法示例

    vue中jsonp插件的使用方法示例

    这篇文章主要给大家介绍了关于vue中jsonp插件的使用方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • Vue中video标签如何实现不静音自动播放

    Vue中video标签如何实现不静音自动播放

    最近在做大屏展示需要在一开始播放引导视频,产生自动播放需求,下面这篇文章主要给大家介绍了关于Vue中video标签如何实现不静音自动播放的相关资料,需要的朋友可以参考下
    2023-01-01
  • Vue2中无法监听数组和对象的某些变化问题

    Vue2中无法监听数组和对象的某些变化问题

    这篇文章主要介绍了Vue2中无法监听数组和对象的某些变化问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue3子组件watch无法监听父组件传递的属性值的解决方法

    Vue3子组件watch无法监听父组件传递的属性值的解决方法

    这篇文章主要介绍了Vue3子组件watch无法监听父组件传递的属性值的解决方法,文中通过代码示例讲解的讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-10-10
  • vue3+Ts使用pinia方式(vue-lic搭建项目)

    vue3+Ts使用pinia方式(vue-lic搭建项目)

    文章介绍了如何在Vue 3项目中使用Pinia进行状态管理,主要内容包括安装Pinia、初始化、在main.ts中注册和使用,以及在.vue的setup中使用state,文章还提到getters和actions的使用可以参考官方文档,总结部分表达了作者希望得到大家支持的意愿
    2025-01-01
  • Vue报错:TypeError: Cannot create property ‘xxxx‘ on的解决

    Vue报错:TypeError: Cannot create property ‘xxxx‘ on的解决

    这篇文章主要介绍了Vue报错:TypeError: Cannot create property ‘xxxx‘ on的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06

最新评论