后台管理权限中的路由跳转的思路

思路一： 登录之后，后端根据该用户的角色查询当该用户的权限信息，这些权限信息包含的标识是和本地完整的动态路由的name是有匹配关系的。我们登录之后拿到权限标识和本地的动态路由进行匹配筛选出属于当前用户的动态路由，然后通过router.addRoutes方法，直接添加到路由实例中去

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 导入组件
import login from '@/views/login'
import index from '@/views/index'

import good from '@/views/good'
import goodAdd from '@/views/good/add'
import article from '@/views/article'
import articleAdd from '@/views/article/add'


// 完整的静态路由
const constRoutes = [
  { path:'/', component:index, name:'index'  },
  { path:'/login', component:login, name:'login'  }
]
// 完整的动态路由
export const asyncRoutes = [
  { path:'/good', component:good, name:'good'  },
  { path:'/good/add', component:goodAdd, name:'goodAdd'  },
  { path:'/article', component:article, name:'article'  },
  { path:'/article/add', component:articleAdd, name:'articleAdd'  },
]

const router = new VueRouter({
  // 静态路由 + 动态路由
  // routes:[...constRoutes,...asyncRoutes]
  // 静态路由
  routes:[...constRoutes]
})

export default router

定义json模拟数据

 

<template>
  <div>
    <router-view></router-view