vue3如何实现动态路由

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

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")
 }