vue-admin-template 动态路由的实现(方式一),flutter通知推送

hidden: true,

component: Layout,

children: [

{

path: ‘index/:id’,

name: ‘AddBanner’,

component: () => import(’@/views/appmanage/addbanner/index’),

meta: { title: ‘添加Banner’, icon: ‘’ }

}

]

},

{

path: ‘/createactivationcode’,

hidden: true,

component: Layout,

children: [

{

path: ‘index’,

name: ‘CreateActivationCode’,

component: () => import(’@/views/vipmanage/createactivationcode/index’),

meta: { title: ‘生成激活码’, icon: ‘’ }

}

]

},

]

/**

  • 放置服务器可配置的动态路由

*/

export const asyncRoutes = [

{

path: ‘/usermanagement’,

component: Layout,

redirect: ‘/usermanagement/rolemanagement’,

meta: { title: ‘用户管理’, icon: ‘user’ },

children: [

{

path: ‘rolemanagement’,

component: () => import(’@/views/usermanage/rolemanagement/index’),

meta: { title: ‘角色管理’, icon: ‘’ }

},

{

path: ‘accountlist’,

component: () => import(’@/views/usermanage/accountlist/index’),

meta: { title: ‘账号列表’, icon: ‘’ }

}

]

},

{

path: ‘/voicemanage’,

component: Layout,

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

redirect: ‘/voicemanage/albumscategories’,

meta: { title: ‘语音管理’, icon: ‘voice’ },

children: [

{

path: ‘albumscategories’,

component: () => import(’@/views/voicemanage/albumscategories/index’),

meta: { title: ‘专辑分类’, icon: ‘’ }

},

{

path: ‘listenmanage’,

component: () => import(’@/views/voicemanage/listenmanage/index’),

meta: { title: ‘收听管理’, icon: ‘’ }

}

]

},

{

path: ‘/appmanagement’,

component: Layout,

redirect: ‘/appmanagement/banner’,

meta: { title: ‘App管理’, icon: ‘app’ },

children: [

{

path: ‘banner’,

component: () => import(’@/views/appmanage/banner/index’),

meta: { title: ‘Banner管理’, icon: ‘’ }

},

{

path: ‘appversions’,

component: () => import(’@/views/appmanage/appversions/index’),

meta: { title: ‘App版本管理’, icon: ‘’ }

}

]

},

{

path: ‘/vipmanagement’,

compon

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
动态路由是指路由表在运行时动态生成,而不是在编译时生成。在 Vue.js 中,可以使用 Vue Router 实现动态路由。下面是一个简单的步骤,可以帮助你搭建一个基于 Vue-admin-template动态路由。 1. 安装 Vue Router ```bash npm install vue-router --save ``` 2. 在 src/router/index.js 中引入 Vue Router,并创建一个路由实例 ```javascript 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/index'), hidden: true }, { path: '/404', component: () => import('@/views/404'), hidden: true }, { path: '/', component: Layout, redirect: '/dashboard', children: [{ path: 'dashboard', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: 'Dashboard', icon: 'dashboard' } }] } ]; const createRouter = () => new Router({ mode: 'history', // 启用 history 模式 scrollBehavior: () => ({ y: 0 }), routes: constantRoutes }); const router = createRouter(); export default router; ``` 3. 在 src/store/modules/permission.js 中创建一个动态路由生成函数 ```javascript import { constantRoutes } from '@/router'; /** * 递归过滤异步路由表,返回符合用户角色权限的路由表 * @param routes asyncRoutes * @param roles */ 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; } /** * 判断用户角色是否有权限访问该路由 * @param roles * @param route */ function hasPermission(roles, route) { if (route.meta && route.meta.roles) { return roles.some(role => route.meta.roles.includes(role)); } else { return true; } } const state = { routes: [], addRoutes: [] }; const mutations = { SET_ROUTES: (state, routes) => { state.addRoutes = routes; state.routes = constantRoutes.concat(routes); } }; const actions = { generateRoutes({ commit }, roles) { return new Promise(resolve => { let accessedRoutes; if (roles.includes('admin')) { accessedRoutes = asyncRoutes || []; } else { accessedRoutes = filterAsyncRoutes(asyncRoutes, roles); } commit('SET_ROUTES', accessedRoutes); resolve(accessedRoutes); }); } }; export default { namespaced: true, state, mutations, actions }; ``` 4. 在 src/router/index.js 中引入动态路由生成函数,并在路由实例中使用 ```javascript import Vue from 'vue'; import Router from 'vue-router'; import Layout from '@/layout'; import store from '@/store'; Vue.use(Router); export const constantRoutes = [ // 静态路由 { path: '/login', component: () => import('@/views/login/index'), hidden: true }, { path: '/404', component: () => import('@/views/404'), hidden: true }, { path: '/', component: Layout, redirect: '/dashboard', children: [{ path: 'dashboard', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: 'Dashboard', icon: 'dashboard' } }] } ]; const createRouter = () => new Router({ mode: 'history', // 启用 history 模式 scrollBehavior: () => ({ y: 0 }), routes: constantRoutes }); const router = createRouter(); // 刷新页面时重新生成动态路由 router.beforeEach(async(to, from, next) => { const hasRoles = store.getters.roles && store.getters.roles.length > 0; if (hasRoles) { next(); } else { try { // 获取用户角色信息 const { roles } = await store.dispatch('user/getInfo'); // 生成动态路由 const accessedRoutes = await store.dispatch('permission/generateRoutes', roles); // 添加动态路由 router.addRoutes(accessedRoutes); next({ ...to, replace: true }); } catch (error) { console.log(error); } } }); export function resetRouter() { const newRouter = createRouter(); router.matcher = newRouter.matcher; // reset router } export default router; ``` 以上是一个基于 Vue-admin-template动态路由搭建步骤,你可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值