配置路由表
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Login from "../views/Login.vue";
Vue.use(VueRouter);
// 固定的路由表----不管什么用户登陆都需要的路由
export const fixedRouter = [
// {
// path: '/redirect',
// component: Home,
// hidden: true,
// children: [
// {
// path: '/redirect/:path*',
// component: () => import('@/views/redirect/index')
// }
// ]
// },
{
path: '/login',
component: Login,
hidden: true
},
// {
// path: '/auth-redirect',
// component: () => import('@/views/login/authredirect'),
// hidden: true
// },
// {
// path: '/404',
// component: () => import('@/views/errorPage/404'),
// hidden: true
// },
{
path: '/401',
component: () => import('@/views/errorPage/401'),
hidden: true
},
{
path: '',
component: Home,
redirect: 'dashboard',
children: [
{
path: 'dashboard',
component: () => import('@/views/dashboard/index'),
name: 'Dashboard',
meta: { title: '首页', icon: 'dashboard', affix: true }
}
]
}
]
// 需要权限判断展示的路由
export const permissionRouter = [
{
path: '/user',
component: Home,
redirect: 'noredirect',
alwaysShow: true,
name: 'userManage',
meta: {
title: '用户管理',
icon: 'chart'
},
children: [
{
path: 'user',
component: () => import('@/views/dashboard/index'),
name: 'user',
meta: {
perms: ['GET /admin/user/list'],
title: '会员管理',
noCache: true
}
},
{
path: 'address',
component: () => import('@/views/dashboard/index'),
name: 'address',
meta: {
perms: ['GET /admin/address/list'],
title: '收货地址',
noCache: true
}
},
{
path: 'collect',
component: () => import('@/views/dashboard/index'),
name: 'collect',
meta: {
perms: ['GET /admin/collect/list'],
title: '会员收藏',
noCache: true
}
},
{
path: 'footprint',
component: () => import('@/views/dashboard/index'),
name: 'footprint',
meta: {
perms: ['GET /admin/footprint/list'],
title: '会员足迹',
noCache: true
}
},
{
path: 'history',
component: () => import('@/views/dashboard/index'),
name: 'history',
meta: {
perms: ['GET /admin/history/list'],
title: '搜索历史',
noCache: true
}
},
{
path: 'feedback',
component: () => import('@/views/dashboard/index'),
name: 'feedback',
meta: {
perms: ['GET /admin/feedback/list'],
title: '意见反馈',
noCache: true
}
}
]
},
{
path: '/mall',
component: Home,
redirect: 'noredirect',
alwaysShow: true,
name: 'mallManage',
meta: {
title: '商场管理',
icon: 'chart'
},
children: [
{
path: 'region',
component: () => import('@/views/dashboard/index'),
name: 'region',
meta: {
title: '行政区域',
noCache: true
}
},
{
path: 'brand',
component: () => import('@/views/dashboard/index'),
name: 'brand',
meta: {
perms: ['GET /admin/brand/list', 'POST /admin/brand/create', 'GET /admin/brand/read', 'POST /admin/brand/update', 'POST /admin/brand/delete'],
title: '品牌制造商',
noCache: true
}
},
{
path: 'category',
component: () => import('@/views/dashboard/index'),
name: 'category',
meta: {
perms: ['GET /admin/category/list', 'POST /admin/category/create', 'GET /admin/category/read', 'POST /admin/category/update', 'POST /admin/category/delete'],
title: '商品类目',
noCache: true
}
},
{
path: 'order',
component: () => import('@/views/dashboard/index'),
name: 'order',
meta: {
perms: ['GET /admin/order/list', 'GET /admin/order/detail', 'POST /admin/order/ship', 'POST /admin/order/refund', 'POST /admin/order/delete', 'POST /admin/order/reply'],
title: '订单管理',
noCache: true
}
},
{
path: 'aftersale',
component: () => import('@/views/dashboard/index'),
name: 'aftersale',
meta: {
perms: ['GET /admin/aftersale/list', 'GET /admin/aftersale/detail', 'POST /admin/order/receive', 'POST /admin/aftersale/complete', 'POST /admin/aftersale/reject'],
title: '售后管理',
noCache: true
}
},
{
path: 'issue',
component: () => import('@/views/dashboard/index'),
name: 'issue',
meta: {
perms: ['GET /admin/issue/list', 'POST /admin/issue/create', 'GET /admin/issue/read', 'POST /admin/issue/update', 'POST /admin/issue/delete'],
title: '通用问题',
noCache: true
}
},
{
path: 'keyword',
component: () => import('@/views/dashboard/index'),
name: 'keyword',
meta: {
perms: ['GET /admin/keyword/list', 'POST /admin/keyword/create', 'GET /admin/keyword/read', 'POST /admin/keyword/update', 'POST /admin/keyword/delete'],
title: '关键词',
noCache: true
}
}
]
},
{
path: '/goods',
component: Home,
redirect: 'noredirect',
alwaysShow: true,
name: 'goodsManage',
meta: {
title: '商品管理',
icon: 'chart'
},
children: [
{
path: 'list',
component: () => import('@/views/dashboard/index'),
name: 'goodsList',
meta: {
perms: ['GET /admin/goods/list', 'POST /admin/goods/delete'],
title: '商品列表',
noCache: true
}
},
{
path: 'create',
component: () => import('@/views/dashboard/index'),
name: 'goodsCreate',
meta: {
perms: ['POST /admin/goods/create'],
title: '商品上架',
noCache: true
}
},
{
path: 'edit',
component: () => import('@/views/dashboard/index'),
name: 'goodsEdit',
meta: {
perms: ['GET /admin/goods/detail', 'POST /admin/goods/update', 'POST /admin/goods/catAndBrand'],
title: '商品编辑',
noCache: true
},
hidden: true
},
{
path: 'comment',
component: () => import('@/views/dashboard/index'),
name: 'goodsComment',
meta: {
perms: ['GET /admin/comment/list', 'POST /admin/comment/delete'],
title: '商品评论',
noCache: true
}
}
]
},
{
path: '/promotion',
component: Home,
redirect: 'noredirect',
alwaysShow: true,
name: 'promotionManage',
meta: {
title: '推广管理',
icon: 'chart'
},
children: [
{
path: 'ad',
component: () => import('@/views/dashboard/index'),
name: 'ad',
meta: {
perms: ['GET /admin/ad/list', 'POST /admin/ad/create', 'GET /admin/ad/read', 'POST /admin/ad/update', 'POST /admin/ad/delete'],
title: '广告管理',
noCache: true
}
},
{
path: 'coupon',
component: () => import('@/views/dashboard/index'),
name: 'coupon',
meta: {
perms: ['GET /admin/coupon/list', 'POST /admin/coupon/create', 'POST /admin/coupon/update', 'POST /admin/coupon/delete'],
title: '优惠券管理',
noCache: true
}
},
{
path: 'couponDetail',
component: () => import('@/views/dashboard/index'),
name: 'couponDetail',
meta: {
perms: ['GET /admin/coupon/list', 'GET /admin/coupon/listuser'],
title: '优惠券详情',
noCache: true
},
hidden: true
},
{
path: 'topic',
component: () => import('@/views/dashboard/index'),
name: 'topic',
meta: {
perms: ['GET /admin/topic/list', 'POST /admin/topic/create', 'GET /admin/topic/read', 'POST /admin/topic/update', 'POST /admin/topic/delete'],
title: '专题管理',
noCache: true
}
},
{
path: 'topic-create',
component: () => import('@/views/dashboard/index'),
name: 'topicCreate',
meta: {
perms: ['POST /admin/topic/create'],
title: '专题创建',
noCache: true
},
hidden: true
},
{
path: 'topic-edit',
component: () => import('@/views/dashboard/index'),
name: 'topicEdit',
meta: {
perms: ['GET /admin/topic/read', 'POST /admin/topic/update'],
title: '专题编辑',
noCache: true
},
hidden: true
},
{
path: 'groupon-rule',
component: () => import('@/views/dashboard/index'),
name: 'grouponRule',
meta: {
perms: ['GET /admin/groupon/list', 'POST /admin/groupon/create', 'POST /admin/groupon/update', 'POST /admin/groupon/delete'],
title: '团购规则',
noCache: true
}
},
{
path: 'groupon-activity',
component: () => import('@/views/dashboard/index'),
name: 'grouponActivity',
meta: {
perms: ['GET /admin/groupon/listRecord'],
title: '团购活动',
noCache: true
}
}
]
},
{
path: '/sys',
component: Home,
redirect: 'noredirect',
alwaysShow: true,
name: 'sysManage',
meta: {
title: '系统管理',
icon: 'chart'
},
children: [
{
path: 'admin',
component: () => import('@/views/dashboard/index'),
name: 'admin',
meta: {
perms: ['GET /admin/admin/list', 'POST /admin/admin/create', 'POST /admin/admin/update', 'POST /admin/admin/delete'],
title: '管理员',
noCache: true
}
},
{
path: 'notice',
component: () => import('@/views/dashboard/index'),
name: 'sysNotice',
meta: {
perms: ['GET /admin/notice/list', 'POST /admin/notice/create', 'POST /admin/notice/update', 'POST /admin/notice/delete'],
title: '通知管理',
noCache: true
}
},
{
path: 'log',
component: () => import('@/views/dashboard/index'),
name: 'log',
meta: {
perms: ['GET /admin/log/list'],
title: '操作日志',
noCache: true
}
},
{
path: 'role',
component: () => import('@/views/dashboard/index'),
name: 'role',
meta: {
perms: ['GET /admin/role/list', 'POST /admin/role/create', 'POST /admin/role/update', 'POST /admin/role/delete', 'GET /admin/role/permissions', 'POST /admin/role/permissions'],
title: '角色管理',
noCache: true
}
},
{
path: 'os',
component: () => import('@/views/dashboard/index'),
name: 'os',
meta: {
perms: ['GET /admin/storage/list', 'POST /admin/storage/create', 'POST /admin/storage/update', 'POST /admin/storage/delete'],
title: '对象存储',
noCache: true
}
}
]
},
{
path: '/config',
component: Home,
redirect: 'noredirect',
alwaysShow: true,
name: 'configManage',
meta: {
title: '配置管理',
icon: 'chart'
},
children: [
{
path: 'mall',
component: () => import('@/views/dashboard/index'),
name: 'configMall',
meta: {
perms: ['GET /admin/config/mall', 'POST /admin/config/mall'],
title: '商场配置',
noCache: true
}
},
{
path: 'express',
component: () => import('@/views/dashboard/index'),
name: 'configExpress',
meta: {
perms: ['GET /admin/config/express', 'POST /admin/config/express'],
title: '运费配置',
noCache: true
}
},
{
path: 'order',
component: () => import('@/views/dashboard/index'),
name: 'configOrder',
meta: {
perms: ['GET /admin/config/order', 'POST /admin/config/order'],
title: '订单配置',
noCache: true
}
},
{
path: 'wx',
component: () => import('@/views/dashboard/index'),
name: 'configWx',
meta: {
perms: ['GET /admin/config/wx', 'POST /admin/config/wx'],
title: '小程序配置',
noCache: true
}
}
]
},
{
path: '/stat',
component: Home,
redirect: 'noredirect',
alwaysShow: true,
name: 'statManage',
meta: {
title: '统计报表',
icon: 'chart'
},
children: [
{
path: 'user',
component: () => import('@/views/dashboard/index'),
name: 'statUser',
meta: {
perms: ['GET /admin/stat/user'],
title: '用户统计',
noCache: true
}
},
{
path: 'order',
component: () => import('@/views/dashboard/index'),
name: 'statOrder',
meta: {
perms: ['GET /admin/stat/order'],
title: '订单统计',
noCache: true
}
},
{
path: 'goods',
component: () => import('@/views/dashboard/index'),
name: 'statGoods',
meta: {
perms: ['GET /admin/stat/goods'],
title: '商品统计',
noCache: true
}
}
]
},
{
path: 'external-link',
component: Home,
redirect: 'noredirect',
alwaysShow: true,
name: 'externalLink',
meta: {
title: '外链',
icon: 'link'
},
children: [
{
path: 'https://cloud.tencent.com/product/cos',
meta: { title: '腾讯云存储', icon: 'link' }
},
{
path: 'https://cloud.tencent.com/product/sms',
meta: { title: '腾讯云短信', icon: 'link' }
},
{
path: 'https://pay.weixin.qq.com/index.php/core/home/login',
meta: { title: '微信支付', icon: 'link' }
},
{
path: 'https://mpkf.weixin.qq.com/',
meta: { title: '小程序客服', icon: 'link' }
},
{
path: 'https://www.alibabacloud.com/zh/product/oss',
meta: { title: '阿里云存储', icon: 'link' }
},
{
path: 'https://www.qiniu.com/products/kodo',
meta: { title: '七牛云存储', icon: 'link' }
},
{
path: 'http://www.kdniao.com/api-track',
meta: { title: '快递鸟', icon: 'link' }
}
]
},
{
path: '/profile',
component: Home,
redirect: 'noredirect',
alwaysShow: true,
children: [
{
path: 'password',
component: () => import('@/views/dashboard/index'),
name: 'password',
meta: { title: '修改密码', noCache: true }
},
{
path: 'notice',
component: () => import('@/views/dashboard/index'),
name: 'notice',
meta: { title: '通知中心', noCache: true }
}
],
hidden: true
},
{ path: '*', redirect: '/401', hidden: true }
]
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes:fixedRouter,
});
export default router;
2.在src目录下创建utils文件夹;
文件夹里面创建一个全局文件 global.js文件
global.antRouter = '' //全局的路由
3.src平级创建一个文件permission.js
// 取到需要权限判断的路由表
import {
permissionRouter,
fixedRouter
} from '@/router'
import router from '@/router'
// import axios from 'axios'
var addRouFlag = false
router.beforeEach((to, from, next) => {//路由前置守卫
// 取到用户的角色
let GetRole = sessionStorage.getItem("name")
//获取到当前用户的权限
let userRoles = sessionStorage.getItem("perms");
let getRoutes = ""; //重新生成的路由
// console.log(userRoles)
// 如果登录了
if (GetRole && GetRole !== 'unload') {
next() //next()方法后的代码也会执行
// 1.如果路由表 没根据角色进行筛选,就筛选一次
if (!addRouFlag) {
addRouFlag = true;
// 2.根据用户的角色、和需要动态展示的路由,生成符合用户角色的路由
if (userRoles.includes('*')) { //如果是*,代表是超级管理员,拥有全部的路由
getRoutes = permissionRouter;
} else {
getRoutes = baseRoleGetRouters(permissionRouter, userRoles.split(","))
}
// 3.利用global属性,让渲染菜单的组件sideMeuns.vue重新生成左侧菜单
console.log(getRoutes);
global.antRouter = fixedRouter.concat(getRoutes)
// 4.将生成好的路由addRoutes
// vur-router 版本是2.x的写法,addRoutes接受的是一个数组,addRoutes在3.x的版本中已经废弃,要使用addRoute来编写,
// router.addRoutes(fixedRouter.concat(getRoutes))
// vur-router 版本是3.x的写法 ,addRoute接受的是一个一个的对象
let allRoutes = fixedRouter.concat(getRoutes);
console.log(global.antRouter,'未添加之前的路由列表');
allRoutes.forEach(item=>{
router.addRoute(item)
})
console.log("------重新生成动态路由表---------")
console.log(fixedRouter.concat(getRoutes))
console.log(global.antRouter,'添加之后的路由列表');
// 5.push之后,会重新进入到beforeEach的钩子里,直接进入第一个if判断
next({
path: to.path
})
}
} else {
// 用户没登录,跳转到登录页面
if (to.path === '/login') {
next()
} else {
next('/login?name=123')
}
}
})
//判断是否拥有权限
function hasPermission(route, roles) {
if (roles.indexOf('*') >= 0) return true // admin permission passed directly
if (route.meta && route.meta.perms) {
return roles.some(perm => route.meta.perms.indexOf(perm) >= 0)
} else {
return true
}
}
// 根据用户的角色取到该用户对应的路由
function baseRoleGetRouters(routes, perms) {
console.log(routes);
console.log(perms);
const res = [] //定义一个数组来存放过滤后的路由
// routes---动态路由表
// perms---获取到的用户角色,数组
// let rightRoutes = routes.filter((route, index) => {
// if (hasPermission(route, perms)) {
// if (route.children && route.children.length) {
// route.children = baseRoleGetRouters(route.children, perms)
// }
// return true
// }
// console.log(rightRoutes)
// return false
// })
// return rightRoutes
routes.forEach(route => {
const tmp = {
...route
}
// 使用递归的方式来过滤生成路由列表
if (tmp.children) {
tmp.children = baseRoleGetRouters(tmp.children, perms)
// console.log(1)
console.log(res)
if (tmp.children && tmp.children.length > 0) {
// console.log(2)
console.log(res)
res.push(tmp)
}
} else {
if (hasPermission(tmp, perms)) {
res.push(tmp)
}
}
})
return res
}
4.mian。js引入全局文件
import '@/utils/global'//全局
5.渲染侧边栏
<template>
<div class="">
<!-- 遍历路由表,生成左侧菜单 -->
<template v-for="(item,index) in routes" v-if="!item.hidden">
<!-- 一级菜单的情况 -->
<template v-if="item.path===''&&item.children.length===1">
<router-link :to="item.path+'/'+item.children[0].path">
<!-- index跟浏览器地址对应,这样菜单才能显示选中状态 -->
<el-menu-item :index="item.path+'/'+item.children[0].path">
<template slot="title">
<!-- 设置icon -->
<i v-if="item.children[0].meta.icon" :class="item.children[0].meta.icon"></i>
<!-- 菜单名称 -->
{{item.children[0].meta.title}}
</template>
</el-menu-item>
</router-link>
</template>
<!-- 一级菜单的情况 end-->
<!-- 多级菜单 -->
<template v-else>
<el-submenu :index="item.path">
<template slot="title">
<i :class="item.meta.icon"></i>
{{item.meta.title}}
</template>
<!-- 遍历子菜单 -->
<template v-for="(itemChild,indexChild) in item.children" v-if="!itemChild.hidden">
<!-- 当发现存在3级或大于3级菜单时,重新遍历当前组件 -->
<template v-if="itemChild.children&&itemChild.children.length>0">
<side-meuns :routes="[itemChild]" class="nest-menu"></side-meuns>
</template>
<!-- 2级菜单时-->
<template v-else>
<router-link :to="item.path+'/'+itemChild.path">
<el-menu-item :index="item.path+'/'+itemChild.path">
<i v-if="itemChild.meta.icon" :class="itemChild.meta.icon"></i>
{{itemChild.meta.title}}</el-menu-item>
</router-link>
</template>
</template>
<!-- 遍历子菜单 end-->
</el-submenu>
</template>
<!-- 多级菜单 end-->
</template>
</div>
</template>
<script>
import '@/styles/index.css'
export default {
data() {
return {
meuns: ''
}
},
mounted() {
this.meuns = global.antRouter
}
}
</script>
这里的侧边栏是子组件,直接使用饿了么创建就可以了,可以不需要使用子组件的,
6。全部代码可以去这个链接
https://gitee.com/leihaolong/dynamic-routing.git