欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決vue2+vue-router動(dòng)態(tài)路由添加及路由刷新后消失問題

 更新時(shí)間:2024年08月16日 10:25:57   作者:白臻  
這篇文章主要介紹了解決vue2+vue-router動(dòng)態(tài)路由添加及路由刷新后消失問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

使用的是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);

// 公共狀態(tài)
const state = {
 
  userRoutes: [],
};

const mutations = {

  setUserRouters(state, payload) {
   
    state.userRoutes = payload;
  },
};

export default new Vuex.Store({
  actions,
  mutations,
  state,
  getters,
});

獲取后臺(tái)數(shù)據(jù)

  async mounted() {
    // 從后臺(tái)獲取路由數(shù)據(jù)
    const mRoutes = getMenu();
    this.menus = await mRoutes;
  },

動(dòng)態(tài)路由刷新后消失解決辦法

//全局前置路由守衛(wèi)————初始化的時(shí)候被調(diào)用、每次路由切換之前被調(diào)用
router.beforeEach((to, from, next) => {
 
  if (load === 0) {
    load++;
    getMenu();
    
    next({ path: to.fullPath });
  }
  next();
  
});

總結(jié)

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 前端低代碼form-generator實(shí)現(xiàn)及新增自定義組件詳解

    前端低代碼form-generator實(shí)現(xiàn)及新增自定義組件詳解

    這篇文章主要給大家介紹了關(guān)于前端低代碼form-generator實(shí)現(xiàn)及新增自定義組件的相關(guān)資料,form-generator是一個(gè)開源的表單生成器,可以幫助我們快速構(gòu)建各種表單頁面,需要的朋友可以參考下
    2023-11-11
  • VueJS實(shí)現(xiàn)用戶管理系統(tǒng)

    VueJS實(shí)現(xiàn)用戶管理系統(tǒng)

    這篇文章主要為大家詳細(xì)介紹了VueJS實(shí)現(xiàn)用戶管理系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-05-05
  • Vue2中Class?Component的使用指南

    Vue2中Class?Component的使用指南

    Vue.js?以其簡(jiǎn)單易用和靈活性受到了廣大開發(fā)者的喜愛,然而,隨著項(xiàng)目的復(fù)雜度增加,組件的管理和組織也變得越來越重要,下面我們就來看看如何通過vue-class-component編寫更加優(yōu)雅和結(jié)構(gòu)化的組件
    2024-11-11
  • Vue-router不允許導(dǎo)航到當(dāng)前位置(/path)錯(cuò)誤原因以及修復(fù)方式

    Vue-router不允許導(dǎo)航到當(dāng)前位置(/path)錯(cuò)誤原因以及修復(fù)方式

    本文主要介紹了Vue-router不允許導(dǎo)航到當(dāng)前位置(/path)錯(cuò)誤原因以及修復(fù)方式,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • vue項(xiàng)目配置國(guó)際化$t('')的介紹和用法示例

    vue項(xiàng)目配置國(guó)際化$t('')的介紹和用法示例

    這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目配置國(guó)際化?$t('')的介紹和用法的相關(guān)資料,多語言和國(guó)際化現(xiàn)在已經(jīng)成為一個(gè)網(wǎng)站或應(yīng)用的必要功能之一,Vue作為一款流行的前端框架,在這方面也有著靈活的解決方案,需要的朋友可以參考下
    2023-09-09
  • vue computed無法得到this的屬性或方法的解決

    vue computed無法得到this的屬性或方法的解決

    這篇文章主要介紹了vue computed無法得到this的屬性或方法的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • 可能是vue中使用axios最詳細(xì)教程

    可能是vue中使用axios最詳細(xì)教程

    Axios是一個(gè)基于Promise用于瀏覽器和nodejs的HTTP客戶端,本質(zhì)上也是對(duì)原生XHR的封裝,只不過它是Promise的實(shí)現(xiàn)版本,符合最新的ES規(guī)范,下面這篇文章主要給大家介紹了關(guān)于vue中使用axios最詳細(xì)教程的相關(guān)資料,需要的朋友可以參考下
    2022-08-08
  • 解決iview打包時(shí)UglifyJs報(bào)錯(cuò)的問題

    解決iview打包時(shí)UglifyJs報(bào)錯(cuò)的問題

    下面小編就為大家分享一篇解決iview打包時(shí)UglifyJs報(bào)錯(cuò)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • 在vue2?中使用?tailwindcss的方法?親測(cè)可用

    在vue2?中使用?tailwindcss的方法?親測(cè)可用

    這篇文章主要介紹了在vue2?中使用?tailwindcss的方法?親測(cè)可用,本文分步驟給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-07-07
  • 詳解vue樣式穿透的幾種方式

    詳解vue樣式穿透的幾種方式

    本文主要介紹了vue樣式穿透的幾種方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06

最新評(píng)論