技术栈: vue3,ts,vant,vueRouter4
vueRouter4中移除了addRouters,所以只能通过addRouter进行路由的动态添加, 不能添加数组类型的路由列表
- 遇到的问题, 添加完路由后跳转添加的页面却
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);
};
- 动态添加的路由, 刷新依然
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();
