vue中动态路由(vue后端动态路由)

[db:作者]

通常我们在vue项目中配置前端路由，但是在某些项目中可能会遇到权限控制，所以我们参与到动态路由的设置中。
动态路由设置一般有两种:(1)简单角色路由设置:比如只涉及管理员和普通用户的权限。通常简单的角色权限直接在前端设置。
(2)复杂的路由权限设置:如OA系统、多个角色的权限配置等。通常后端需要返回路由表，前端渲染使用
1.简单角色路由设置(1)配置项目路由权限。
//Router . js从' Vue '导入Vue从' vue-router '导入路由器从' @/Layout 'Vue . use(Router)let async routes ={path:'/permission '，component: Layout，redirect:'/permission/page '，alwaysShow: true， name:' permission '
(2)新建一个公共的asyncRouter.js文件//async router . js/并判断当前角色是否有权限函数是否有权限(roles，route){if(route . meta   amp；route . meta . roles){return roles . some(role =  gt；route . meta . roles . includes(role)]} else {return true}}递归过滤异步路由表，过滤角色权限routes 导出函数filterasyncproutes(routes)routes . foreach(route =  gt；{const tmp = {...route }if(has permission(roles，tmp)){if(tmp . children){tmp . children = filterasyncproutes(tmp . children，roles)}}}})return RES}
(3)创建路由卫士:创建一个public permission.js文件，设置路由卫士导入路由器from’。/router'  import store from '。/store 'import n progress from ' n progress '//progress bar pluginimport ' n progress/n progress . CSS '//progress bar styleimport { gettoken } from ' @/utils/auth 'import { filterasyncproutes } from ' @/utils/async router . js 'n progress . configure({ show spinner:false })//进度条配置 const白名单whitelist{//进度条启动NProgress.start()//获取路由元中的标题，并设置为页面标题document . title = to . meta . title/获取令牌const hastoken = gettoken()//确定当前用户是否登录If(hastoken){[/h If(to . path = = '/log in '){store . getters . roles . length  gt；0if(has Roles){next()} else {/Get user Rolesconstroles = away store . state . RolesGet role路由表const access routes = filterasyncproutes(away store . state . routes，Roles)//动态添加路由到路由器 router.addroutes(访问路由) next ({...to，replace:true })} catch(error){//。重定向= $ {到。path } `)nprogress . done()}}} else {/用户未登录 if == -1) {//要跳转的路由是否是白名单中的路由，如果是，直接barnext()} else {/要跳转的路由不是白名单中的路由，直接跳转到登录页面重定向= $ {到。path } `)/End precision barn progress . done()}}]router . after each(()= {//End precision barn progress . done()})
(4)将permission.js文件引入main.js (5)登录时在store中存储角色。(2)复杂的路由权限设置(后端动态返回路由数据)。(1)配置项目路由文件。这个文件里没有路由，或者有一些公共路由，也就是没有权限的路由。
从“Vue”导入Vue从“vue-router”导入路由器从“@/layout”导入布局；vue . use(router)/配置项目中没有涉及权限的公共路由导出常量路由= [ { path:'/login '，component:()= import(' @/views/log in ')，hidden: true}，{path: '/404 '，component:()=  gt；import('@/views/404 ')，hidden: true}，]const create router =()=  gt；新路由器({模式:' history '，scroll behavior:()=  gt；({ y: 0 })，routes:const routes})const router = create router()导出函数reset router(){const new router = create router()router . matcher = new router . matcher}导出默认路由器
(2)创建新的公共asyncRouter.js文件//引入诸如路由文件的公共路由import { constant routes } from '../router '；//布局组件是项目中的主页。切换路由时，仅切换布局import Layout from '@/layout '中的组件；导出函数getasyncproutes(routes){constres =[]//定义路由中需要的自定义名称 constkeys = ['path '，' name '，' children '，' redirect '，' meta' Hidden']//遍历路由数组重新组织可用的路由routes . foreach(item = >；{const new item = { }；If(item.component){/判断item . component是否等于' Layout '，如果直接被引入的布局组件替换If(item . component = = ' Layout '){new item . component = Layout} else {/item . component不等于' Layout '，则表示是组件的路径地址，所以直接被routenew item . component = resolve引入的方法替换Require([`@/views/$ { item . component } `]，resolve)/这里最好用require。import在引入变量时会出现各种莫名其妙的错误/new item . component =(()= >；import(`@/views/$ { item . component } `)；}}for(item中的const key){if(keys。includes(key)){new item[key]= item[key]}[/h  amp；new item . children . length){new item . children = getaasyncroutes(item . children)}RES . push(new item)})/返回已处理的可用路线。
(3)创建路由守卫:创建一个public permission.js文件，设置路由守卫//进度条的设置如上面第一个描述中所述从'导入路由器。/router'  import store from '。/store 'import n progress from ' n progress '//progress barimport ' n progress/n progress . CSS '//progress bar styleimport { getToken } from ' @/utils/auth '//get token from cookieimport { getasync routes } from ' @/utils/async router 'const whiteList =['/log in ']；router . before each(async(to，from，next)=  gt；{n progress . start()document . title = to . meta . title；//获取用户令牌，用于确定当前用户是否登录const hastoken = gettoken()if(hastoken){if(to。path = = '/log in '){next({ path:'/' })[/Else {//异步获取存储中的路由let route = awaitstore . state . add routes；const hasRouters = route  amp amproute.length  gt0;//判断店内是否有路线。如果有，进入下一步 if(有路由器){next()} else {/store。如果没有路由，需要获取异步路由并格式化[/] //动态添加格式化路由 router.addroutes(接入路由)；下一个({...to，replace:true })} catch(error){/message . error(' error ')next(`/log in？redirect = $ { to . path } `)nprogress . done()}}}} else {if(whitelist . index of(to . path)！= =-1){next()} else {next(`/log in？redirect = $ { to . path } `)nprogress . done()}}})router . after each(()=  gt；{n progress . done()})
(4)将permission.js文件引入main.js (5)登录时，将路由信息存储在store中。//登录接口调用后，调用路由接口，后端会返回对应用户的route res.router。我们需要把它存放在商店里，这样其他地方也能得到这个。$ store.dispatch("添加路线"，)
此时，整个动态路由可以通过，但是页面跳转和路由守卫处理是异步的，动态路由添加后会有空白页跳转。这是因为当路由下一次执行时，路由器中的数据不存在()。此时，您可以通过window.location.reload()刷新路线。
后端路由格式:routerlist =[{" path ":/other "， "component": "layout "，" redirect ":" no rect "，" name "" meta ":{" title ":" test "，}，" children ":{" path ":" A "，
注意:vue是一个单页面的应用，所以页面一刷新就会丢失一些数据，所以我们需要将数据存储在本地的store中，以保证路由不会丢失。为了通过vue页面刷新保存页面状态，您可以看到当页面刷新时vue是如何保存状态信息的。
最后微信官方账号:小何长大了，佛学更有素养了，都是他踩过的坑或者学过的东西。
欢迎感兴趣的朋友关注我。哦，我是何萧艾。大家一起进步，duck。