技術(shù)棧: vue3,ts,vant,vueRouter4
vueRouter4中移除了addRouters,所以只能通過addRouter進行路由的動態(tài)添加, 不能添加數(shù)組類型的路由列表
- 遇到的問題, 添加完路由后跳轉(zhuǎn)添加的頁面卻
404
解決方法: 添加路由前移除404頁面, 添加路由后再添加404通配符, 保持404在最后
// 動態(tài)掛載路由
export const registerRouter = async (name: string) => {
if (!name) return;
// 1. 先刪掉404, 按照文檔來說后添加會將其覆蓋,保險起見還是刪除吧
router.removeRoute("err404");
// 2. 掛載對應(yīng)的路由模塊
let routers = await import(`@/router/modules/${name}.ts`);
routers = routers.default;
await routers.forEach((element: RouteRecordRaw) => {
router.addRoute(element);
});
// 3. 掛載404模塊
router.addRoute(Err404);
};
- 動態(tài)添加的路由, 刷新依然
404
原因: 刷新時,動態(tài)路由需要重新掛載到路由實例, 但是在App.vue中調(diào)用init方法去初始化,并不能解決,因為App.vue屬于路由的根,還未進入就被通配符攔截到404頁面了
解決辦法:
在main.ts中在createApp之前,直接獲取登錄狀態(tài)信息等, 將處理好的路由列表掛載掛載創(chuàng)建
hooks/useInit.ts
/**
* 該函數(shù)負責(zé)刷新時的初始化動作
* 1. 讀取本地存儲的信息,是否登錄,以及身份
* 2. 根據(jù)身份掛載不同的vuex模塊和路由模塊
* 3. 返回到main函數(shù)中生成實例
*/
import { computed } from "vue";
import store from "@/store";
import router from "@/router";
import LoginRoutes from "@/router/modules/login.ts";
import Err404 from "@/router/modules/err";
export const useInit = () => {
const isLogin = computed(() => {
return store.getters["account/isLogin"];
});
if (isLogin.value) {
router.removeRoute("err404");
LoginRoutes.forEach(e => {
router.addRoute(e);
});
router.addRoute(Err404);
}
return {
store,
router
};
};
/**
* 該函數(shù)負責(zé)刷新時的初始化動作
* 1. 讀取本地存儲的信息,是否登錄,以及身份
* 2. 根據(jù)身份掛載不同的vuex模塊和路由模塊
* 3. 返回到main函數(shù)中生成實例
*/
import { computed } from "vue";
import store from "@/store";
import router from "@/router";
import LoginRoutes from "@/router/modules/login.ts";
import Err404 from "@/router/modules/err";
export const useInit = () => {
const isLogin = computed(() => {
return store.getters["account/isLogin"];
});
if (isLogin.value) {
router.removeRoute("err404");
LoginRoutes.forEach(e => {
router.addRoute(e);
});
router.addRoute(Err404);
}
return {
store,
router
};
};
main.ts
import { useInit } from "@/hooks/useInit";
const { store, router } = useInit();
