首先明白什么是动态路由，路由的触发往往是由菜单决定的，那么就要先理解什么是动态菜单，动态菜单就是说每个用户的角色不同，看到的菜单，往往也是不同的，管理员看到的肯定会多一些，那么因为有不同的菜单，对应着，点击跳转的页面也是不同的，那么往往会在登录成功后，拿到该用户所有的所有菜单权限，然后每个菜单又对应着它所对要跳转的路由地址，并且也含有当前路由地址的父级路由

1. 配置静态路由，就是不管哪个用户都可以看到的路由，比如主页面的路由，登陆的路由，404的路由等

   import {createRouter,createWebHashHistory} from 'vue-router'import {type Route} from "@/types"//配置静态路由
   let router=createRouter({history:createWebHashHistory(),routes:[{path:"/main",component:()=>import("@/components/Main.vue"),name:"main"},{path:'/404',component:()=>import("@/view/404.vue")   },{path:"/",redirect:"main"},{path:"/login",component:()=>import("@/view/Login.vue")}]
   })//对外暴露一个添加路由的函数
   export function  addRoute(routerList: Route[]){console.log("sss");for(const route of routerList){console.log(route)router.addRoute(route.parentName,{path: route.path,name: route.name,component: ()=>import(route.component)})}}export default router

   2.定义一个路由接口，该接口定义了从后端，拿到的用户菜单路由模型

   export interface Route{path:string,//路由地址，注意千万不要最前边的/name:string,//路由名称component:string,//组件地址，相对于router静态路由的index.js的位置，不要用@要用相对路径parentName:string,//父级路由名称
   }

   那么我们从后端拿到的数据格式大概就是下边这样的样子

   let routes:Route[]=[{path:"404",name:"404",component:"../view/404.vue",parentName:"main"},{path:"olds",name:"olds",component:"../components/Olds.vue",parentName:"main"}]

   那么我们在登录成功后，就可以调用路由的addRoute函数来实现动态添加路由需求

如何通过函数式编程的方式实现路由的跳转

import  { useRouter } from 'vue-router';//注意该标签一个定要放在script标签的最上边，不能放在函数中或者某个函数下边let router=useRouter()//登陆成功调用这里，进入主页面function login() {addRoute(routes)router.push("/main/olds")}