vueRouter动态添加以及刷新404问题的解决

技术栈: vue3,ts,vant,vueRouter4

vueRouter4中移除了addRouters,所以只能通过addRouter进行路由的动态添加, 不能添加数组类型的路由列表

1. 遇到的问题, 添加完路由后跳转添加的页面却404
   解决方法: 添加路由前移除404页面, 添加路由后再添加404通配符, 保持404在最后

// 动态挂载路由
export const registerRouter = async (name: string) => {
    if (!name) return;
    // 1. 先删掉404, 按照文档来说后添加会将其覆盖,保险起见还是删除吧
    router.removeRoute("err404");
    // 2. 挂载对应的路由模块
    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. 动态添加的路由, 刷新依然404
   原因: 刷新时,动态路由需要重新挂载到路由实例, 但是在App.vue中调用init方法去初始化,并不能解决,因为App.vue属于路由的根,还未进入就被通配符拦截到404页面了

解决办法:
在main.ts中在createApp之前,直接获取登录状态信息等, 将处理好的路由列表挂载挂载创建

hooks/useInit.ts
/**
 * 该函数负责刷新时的初始化动作
 * 1. 读取本地存储的信息,是否登录,以及身份
 * 2. 根据身份挂载不同的vuex模块和路由模块
 * 3. 返回到main函数中生成实例
 */
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
    };
};
/**
 * 该函数负责刷新时的初始化动作
 * 1. 读取本地存储的信息,是否登录,以及身份
 * 2. 根据身份挂载不同的vuex模块和路由模块
 * 3. 返回到main函数中生成实例
 */
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();