技術(shù)棧: vue3,ts,vant,vueRouter4

vueRouter4中移除了addRouters,所以只能通過addRouter進(jìn)行路由的動(dòng)態(tài)添加, 不能添加數(shù)組類型的路由列表

1. 遇到的問題, 添加完路由后跳轉(zhuǎn)添加的頁面卻404
   解決方法: 添加路由前移除404頁面, 添加路由后再添加404通配符, 保持404在最后

// 動(dòng)態(tài)掛載路由
export const registerRouter = async (name: string) => {
    if (!name) return;
    // 1. 先刪掉404, 按照文檔來說后添加會(huì)將其覆蓋,保險(xiǎn)起見還是刪除吧
    router.removeRoute("err404");
    // 2. 掛載對(duì)應(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);
};

2. 動(dòng)態(tài)添加的路由, 刷新依然404
   原因: 刷新時(shí),動(dòng)態(tài)路由需要重新掛載到路由實(shí)例, 但是在App.vue中調(diào)用init方法去初始化,并不能解決,因?yàn)?code>App.vue屬于路由的根,還未進(jìn)入就被通配符攔截到404頁面了

解決辦法:
在main.ts中在createApp之前,直接獲取登錄狀態(tài)信息等, 將處理好的路由列表掛載掛載創(chuàng)建

hooks/useInit.ts
/**
 * 該函數(shù)負(fù)責(zé)刷新時(shí)的初始化動(dòng)作
 * 1. 讀取本地存儲(chǔ)的信息,是否登錄,以及身份
 * 2. 根據(jù)身份掛載不同的vuex模塊和路由模塊
 * 3. 返回到main函數(shù)中生成實(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ù)負(fù)責(zé)刷新時(shí)的初始化動(dòng)作
 * 1. 讀取本地存儲(chǔ)的信息,是否登錄,以及身份
 * 2. 根據(jù)身份掛載不同的vuex模塊和路由模塊
 * 3. 返回到main函數(shù)中生成實(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();