本教程操作环境：windows7系统、vue3版，dell g3电脑。
动态路由不同于常见的静态路由，可以根据不同的「因素」而改变站点路由列表。
动态路由设置一般有两种：
(1)、简单的角色路由设置：比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置
(2)、复杂的路由权限设置：比如oa系统、多种角色的权限配置。通常需要后端返回路由列表，前端渲染使用
1、简单的角色路由设置
（1）配置项目路由权限
// router.jsimport vue from 'vue'import router from 'vue-router'import layout from '@/layout'vue.use(router)// 权限路由列表let asyncroutes = [ { path: '/permission', component: layout, redirect: '/permission/page', alwaysshow: true, name: 'permission', meta: { title: 'permission', roles: ['admin', 'editor'] // 普通的用户角色 }, children: [ { path: 'page', component: () => import('@/views/permission/page'), name: 'pagepermission', meta: { title: 'page', roles: ['editor'] // editor角色的用户才能访问该页面 } }, { path: 'role', component: () => import('@/views/permission/role'), name: 'rolepermission', meta: { title: 'role', roles: ['admin'] // admin角色的用户才能访问该页面 } } ] }, ] // 静态路由 let defaultrouter = [{ path: '/404', name: '404', component: () => import('@/views/404'), meta: { title: '404' }}]let router = new router({ mode: 'history', scrollbehavior: () => ({ y: 0 }), routes: defaultrouter})export default router
（2）新建一个公共的asyncrouter.js文件
// asyncrouter.js//判断当前角色是否有访问权限function haspermission(roles, route) { if (route.meta && route.meta.roles) { return roles.some(role => route.meta.roles.includes(role)) } else { return true }}// 递归过滤异步路由表，筛选角色权限路由export function filterasyncroutes(routes, roles) { const res = []; routes.foreach(route => { const tmp = { ...route } if (haspermission(roles, tmp)) { if (tmp.children) { tmp.children = filterasyncroutes(tmp.children, roles) } res.push(tmp) } }) return res}
（3）创建路由守卫：创建公共的permission.js文件，设置路由守卫
import router from './router'import store from './store'import nprogress from 'nprogress' // 进度条插件import 'nprogress/nprogress.css' // 进度条样式import { gettoken } from '@/utils/auth' import { filterasyncroutes } from '@/utils/asyncrouter.js'nprogress.configure({ showspinner: false }) // 进度条配置const whitelist = ['/login'] router.beforeeach(async (to, from, next) => { // 进度条开始 nprogress.start() // 获取路由 meta 中的title，并设置给页面标题 document.title = to.meta.title // 获取用户登录的token const hastoken = gettoken() // 判断当前用户是否登录 if (hastoken) { if (to.path === '/login') { next({ path: '/' }) nprogress.done() } else { // 从store中获取用户角色 const hasroles = store.getters.roles && store.getters.roles.length > 0 if (hasroles) { next() } else { try { // 获取用户角色 const roles = await store.state.roles // 通过用户角色，获取到角色路由表 const accessroutes = filterasyncroutes(await store.state.routers,roles) // 动态添加路由到router内 router.addroutes(accessroutes) next({ ...to, replace: true }) } catch (error) { // 清除用户登录信息后，回跳到登录页去 next(`/login?redirect=${to.path}`) nprogress.done() } } } } else { // 用户未登录 if (whitelist.indexof(to.path) !== -1) { // 需要跳转的路由是否是whitelist中的路由，若是，则直接条状 next() } else { // 需要跳转的路由不是whitelist中的路由，直接跳转到登录页 next(`/login?redirect=${to.path}`) // 结束精度条 nprogress.done() } }}) router.aftereach(() => { // 结束精度条 nprogress.done() })
（4）在main.js中引入permission.js文件
（5）在login登录的时候将roles存储到store中
2、复杂的路由权限设置（后端动态返回路由数据）
（1）配置项目路由文件，该文件中没有路由，或者存在一部分公共路由，即没有权限的路由
import vue from 'vue'import router from 'vue-router'import layout from '@/layout';vue.use(router)// 配置项目中没有涉及权限的公共路由export const constantroutes = [ { path: '/login', component: () => import('@/views/login'), hidden: true }, { path: '/404', component: () => import('@/views/404'), hidden: true },]const createrouter = () => new router({ mode: 'history', scrollbehavior: () => ({ y: 0 }), routes: constantroutes})const router = createrouter()export function resetrouter() { const newrouter = createrouter() router.matcher = newrouter.matcher}export default router
（2）新建一个公共的asyncrouter.js文件
// 引入路由文件这种的公共路由import { constantroutes } from '../router';// layout 组件是项目中的主页面，切换路由时，仅切换layout中的组件import layout from '@/layout';export function getasyncroutes(routes) { const res = [] // 定义路由中需要的自定名 const keys = ['path', 'name', 'children', 'redirect', 'meta', 'hidden'] // 遍历路由数组去重组可用的路由 routes.foreach(item => { const newitem = {}; if (item.component) { // 判断 item.component 是否等于 'layout',若是则直接替换成引入的 layout 组件 if (item.component === 'layout') { newitem.component = layout } else { // item.component 不等于 'layout',则说明它是组件路径地址，因此直接替换成路由引入的方法 newitem.component = resolve => require([`@/views/${item.component}`],resolve) // 此处用reqiure比较好，import引入变量会有各种莫名的错误 // newitem.component = (() => import(`@/views/${item.component}`)); } } for (const key in item) { if (keys.includes(key)) { newitem[key] = item[key] } } // 若遍历的当前路由存在子路由，需要对子路由进行递归遍历 if (newitem.children && newitem.children.length) { newitem.children = getasyncroutes(item.children) } res.push(newitem) }) // 返回处理好且可用的路由数组 return res }
（3）创建路由守卫：创建公共的permission.js文件，设置路由守卫
// 进度条引入设置如上面第一种描述一样import router from './router'import store from './store'import nprogress from 'nprogress' // progress barimport 'nprogress/nprogress.css' // progress bar styleimport { gettoken } from '@/utils/auth' // get token from cookieimport { getasyncroutes } from '@/utils/asyncrouter'const whitelist = ['/login'];router.beforeeach( async (to, from, next) => { nprogress.start() document.title = to.meta.title; // 获取用户token，用来判断当前用户是否登录 const hastoken = gettoken() if (hastoken) { if (to.path === '/login') { next({ path: '/' }) nprogress.done() } else { //异步获取store中的路由 let route = await store.state.addroutes; const hasrouters = route && route.length>0; //判断store中是否有路由，若有，进行下一步 if ( hasrouters ) { next() } else { //store中没有路由，则需要获取获取异步路由，并进行格式化处理 try { const accessroutes = getasyncroutes(await store.state.addroutes ); // 动态添加格式化过的路由 router.addroutes(accessroutes); next({ ...to, replace: true }) } catch (error) { // message.error('出错了') next(`/login?redirect=${to.path}`) nprogress.done() } } } } else { if (whitelist.indexof(to.path) !== -1) { next() } else { next(`/login?redirect=${to.path}`) nprogress.done() } }})router.aftereach(() => { nprogress.done() })
（4）在main.js中引入permission.js文件
（5）在login登录的时候将路由信息存储到store中
// 登录接口调用后，调用路由接口，后端返回相应用户的路由res.router，我们需要存储到store中，方便其他地方拿取this.$store.dispatch("addroutes", res.router);
到这里，整个动态路由就可以走通了，但是页面跳转、路由守卫处理是异步的，会存在动态路由添加后跳转的是空白页面，这是因为路由在执行next()时，router里面的数据还不存在，此时，你可以通过window.location.reload()来刷新路由
后端返回的路由格式：
routerlist = [ { "path": "/other", "component": "layout", "redirect": "noredirect", "name": "otherpage", "meta": { "title": "测试", }, "children": [ { "path": "a", "component": "file/a", "name": "a", "meta": { "title": "a页面", "nocache": "true" } }, { "path": "b", "component": "file/b", "name": "b", "meta": { "title": "b页面", "nocache": "true" } }, ] }]
注意：vue是单页面应用程序，所以页面一刷新数据部分数据也会跟着丢失，所以我们需要将store中的数据存储到本地，才能保证路由不丢失。
【相关推荐：vuejs视频教程、web前端开发】
以上就是vue动态路由有哪两种实现方法的详细内容。