Vue根据接口返回权限和动态路由，来配置路由组件

首先再router/index.js中

import Vue from 'vue' import Router from 'vue-router' import { getLogin } from '@/api/login' //登录接口 const Main = () => import('@/pages/index') const Login = () => import('@/pages/login/login') const Home = () => import('@/pages/data/home') const Page404 = () => import('@/pages/404/page-404') const NoAccess = () => import('@/pages/no-access/no-access') //这是你要使用的路由 要是存在多组不同路由可以一样配置 export const routeList = [ { path: '/', name: 'Main', component: Main, redirect: {name: 'Home'}, meta: {requiresAuth: false}, children: [{ path: '/home', name: 'Home', component: Home, meta: {requiresAuth: false, activeLeft: 'Home', activeTop: 'Home'} }] }, { path: '/login', name: 'Login', component: Login, meta: {requiresAuth: false} }, { path: '/page-404', name: 'Page404', component: Page404, meta: {requiresAuth: false} } ] let routeList0 = [] // 系统默认 const routeList2 = [ { path: '/', redirect: '/login', component: Login }, { path: '/login', name: 'Login', component: Login, meta: { requiresAuth: false } } ] // 无权限 export const routeList3 = [ { path: '/', redirect: '/no-access', component: NoAccess }, { path: '/no-access', name: 'NoAccess', component: NoAccess, meta: { requiresAuth: false } }, { path: '/login', name: 'Login', component: Login, meta: {requiresAuth: false} }, { path: '/page-404', name: 'Page404', component: Page404, meta: {requiresAuth: false} } ] Vue.use(Router) //初始化空路由 let routerInstance = new Router({ routes: routeList0 }) //路由添加 export function addNewRouters(list) { routerInstance.options.routes = list routerInstance.addRoutes(list) } var getRouter //是否配置了路由组件 let ischeckAuth = true // 是否登录 store.commit('SET_TAB_LISTS', []) routerInstance.beforeEach((to, from, next) => { if (ischeckAuth&&!getRouter) { // (async () => { // 调取登录接口 返回值 // ret是登录接口调用结果 // let ret = getLogin() 这个地方我暂时写死了 你可以自己拉 接口参考api/login let ret = 'isOk' //未登录 noLogin 无权限noAuth 正常 isOk if (ret === 'noLogin') { getRouter = true //调用路由添加 要是路由不符合要求请自行改写或和后台协商 addNewRouters(routeList2) next({ path: '/login' }) } else { //无权限 if(ret === 'noAuth') { if (!getRouter) { getRouter = true addNewRouters(routeList3) next({ path: '/no-access', }) } else { next() } } else { if (!getRouter) { // setTabLists方法里面获取动态路由 如果是固定的路由组件 该方法可以去掉 store.dispatch('setTabLists', {userId: 1}).then(res => { getRouter = true store.commit('SET_TAB_LISTS', res) addNewRouters(res) console.log(routerInstance) const redirect = decodeURIComponent(from.query.redirect || to.path) if(to.path === redirect) { console.log(to, from, next) if(to.path === '/') { let pathUrl = res[0].children[0].path next({ path: pathUrl }) } else { next({...to, replace:true}) } } else { next({path: redirect}) } }).catch(() => { Notification.error({}) }) //针对固定路由 //if(to.path === redirect) { // console.log(to, from, next) // if(to.path === '/') { // let pathUrl = '/home' // next({ path: pathUrl }) // } else { // next({...to, replace:true}) // } // } else { // next({path: redirect}) //} } else { next() } } } // }) }else{ next() } }) export default routerInstance

登录接口api/login,js 登录接口返回情况以当前项目返回自行配置

import Vue from 'vue' export function getLogin() { return new Promise((resolve, reject) => { Vue.prototype.$axios.get(`/login`).then(res => { if (res.code === '1') { resolve('isOk') } }).catch(() => { let { sessionstatus, authoritystatus } = error.response.headers if (sessionstatus === 'no') { resolve('noLogin') } else { if (authoritystatus === 'no') { resolve('noAuth') return } resolve() } }) }) }

通过vuex管理动态路由store里面的action

import * as types from './mutations' import Vue from 'vue' export const setUserInfo = function ({commit}, account) { commit(types.SET_USER_INFO, account) } export const setTabLists = function ({commit}, params) { return new Promise((resolve, reject) => { Vue.prototype.$axios.get(`/part/${params.userId}/current`).then(res => { if (res) { commit(types.SET_TAB_LISTS, res.data) } resolve() }).catch(() => { reject() }) }) return routeList }

登录权限路由中如果存在多身份路由展示不同的情况 可以更具登录接口的地方配置相对应情况，要是登录的身份时通过动态路由组件返回，则再动态路由返回的时候多做判断 该方法对vue2.3都可使用 请就具体情况使用