Vue3 实现动态路由

#通过自主学习 实现简单的动态路由

参考网址动态路由 | Vue Router

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动态路由实现