做网站花都,网球排名即时最新排名,logo设计公司简介,营销手段有哪些方式首先明白什么是动态路由#xff0c;路由的触发往往是由菜单决定的#xff0c;那么就要先理解什么是动态菜单#xff0c;动态菜单就是说每个用户的角色不同#xff0c;看到的菜单#xff0c;往往也是不同的#xff0c;管理员看到的肯定会多一些#xff0c;那么因为有不同…首先明白什么是动态路由路由的触发往往是由菜单决定的那么就要先理解什么是动态菜单动态菜单就是说每个用户的角色不同看到的菜单往往也是不同的管理员看到的肯定会多一些那么因为有不同的菜单对应着点击跳转的页面也是不同的那么往往会在登录成功后拿到该用户所有的所有菜单权限然后每个菜单又对应着它所对要跳转的路由地址并且也含有当前路由地址的父级路由
配置静态路由就是不管哪个用户都可以看到的路由比如主页面的路由登陆的路由404的路由等 import {createRouter,createWebHashHistory} from vue-routerimport {type Route} from /types//配置静态路由
let routercreateRouter({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 routeruseRouter()//登陆成功调用这里进入主页面function login() {addRoute(routes)router.push(/main/olds)}
