解決vue2+vue-router動(dòng)態(tài)路由添加及路由刷新后消失問題
使用的是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, // 倉(cāng)庫(kù)管理--倉(cāng)庫(kù)
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è)參考,也希望大家多多支持腳本之家。
- vue實(shí)現(xiàn)動(dòng)態(tài)路由的詳細(xì)代碼示例
- Vue實(shí)現(xiàn)動(dòng)態(tài)路由的示例詳解
- Vue?Router動(dòng)態(tài)路由實(shí)現(xiàn)實(shí)現(xiàn)更靈活的頁(yè)面交互
- vue3實(shí)現(xiàn)動(dòng)態(tài)路由及菜單
- vue3動(dòng)態(tài)路由+菜單欄的實(shí)現(xiàn)示例
- 在Vue3中實(shí)現(xiàn)動(dòng)態(tài)路由的示例代碼
- Vue3動(dòng)態(tài)路由(響應(yīng)式帶參數(shù)的路由)變更頁(yè)面不刷新的問題解決辦法
- Vue3+Vue Router實(shí)現(xiàn)動(dòng)態(tài)路由導(dǎo)航的示例代碼
- 前端單獨(dú)實(shí)現(xiàn)vue動(dòng)態(tài)路由的示例代碼
相關(guān)文章
vue中使用echarts制作圓環(huán)圖的實(shí)例代碼
這篇文章主要介紹了vue中使用echarts制作圓環(huán)圖的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
Vue實(shí)現(xiàn)Word/Excel/PDF文件預(yù)覽的詳細(xì)步驟
vue-office是一款專門為 Vue 設(shè)計(jì)的辦公文檔預(yù)覽組件庫(kù),支持 ??Word(.docx),Excel(.xlsx/.xls),PDF?? 等主流格式,下面我們就來看看具體實(shí)現(xiàn)步驟吧2025-07-07
Vue中video標(biāo)簽如何實(shí)現(xiàn)不靜音自動(dòng)播放
最近在做大屏展示需要在一開始播放引導(dǎo)視頻,產(chǎn)生自動(dòng)播放需求,下面這篇文章主要給大家介紹了關(guān)于Vue中video標(biāo)簽如何實(shí)現(xiàn)不靜音自動(dòng)播放的相關(guān)資料,需要的朋友可以參考下2023-01-01
Vue2中無(wú)法監(jiān)聽數(shù)組和對(duì)象的某些變化問題
這篇文章主要介紹了Vue2中無(wú)法監(jiān)聽數(shù)組和對(duì)象的某些變化問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
Vue3子組件watch無(wú)法監(jiān)聽父組件傳遞的屬性值的解決方法
這篇文章主要介紹了Vue3子組件watch無(wú)法監(jiān)聽父組件傳遞的屬性值的解決方法,文中通過代碼示例講解的講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-10-10
vue3+Ts使用pinia方式(vue-lic搭建項(xiàng)目)
文章介紹了如何在Vue 3項(xiàng)目中使用Pinia進(jìn)行狀態(tài)管理,主要內(nèi)容包括安裝Pinia、初始化、在main.ts中注冊(cè)和使用,以及在.vue的setup中使用state,文章還提到getters和actions的使用可以參考官方文檔,總結(jié)部分表達(dá)了作者希望得到大家支持的意愿2025-01-01
Vue報(bào)錯(cuò):TypeError:?Cannot?create?property?‘xxxx‘?on的解決
這篇文章主要介紹了Vue報(bào)錯(cuò):TypeError:?Cannot?create?property?‘xxxx‘?on的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06

