#通过自主学习 实现简单的动态路由
1 为什么要进行动态路由
在项目的开发中,我们不能只把所有路由全部放在前端,通过后期项目深入开发以及权限,动态路由由此应用
2 实现思路
1 通过发送网络请求来获取路由标
2通过router方法添加到路由
3实现动态路由
实现代码
1发送请求,获取到路由列表自定义方法来进行实现
const getRouter = async () => {
const result = await axios.get("http://localhost:3000/router")
if(result.status === 200){
dynamicRouting(result.data)
}
}
2 可以通过两种方式来进行添加
我这种会有所限制,需要大家根据自身的实际情况来改变
import router from "../router";
interface Route {
routeName : string;
pathName : string;
}
async function dynamicRouting(route : Array<Route>){
console.log(route);
const routeList = route.map((item : Route)=>{
return {
path : item.routeName,
component : () => import(""+item.pathName)
}
})
console.log(routeList);
router.addRoute(routeList[0]);
// router.replace(route.currentRoute.value.fullPath)
await router.replace(router.currentRoute.value.fullPath)
}
export default dynamicRouting;
思路视频
vue3动态路由实现