vue纯前端设计动态路由+页面架构

前言

好久没有更新博客了，今天就写一下vue脚手架+antd如何架构一个后台管理系统页面，本来是想弄微前端的但是想想还是算了，不过你熟了的话，可以使用微前端进行架构，基于主体布局不变嵌入微前端。

上图

还行，不过有很多细节没有处理好。不过作为一个参考模型是足够了，我的写偏向简单，看一遍就会了

开始

这里我就主要讲两块（页面架构、路由设计）

App.vue

ps：这里添加一个路由组件(一级页面需要)

layout.vue

ps：在tab标签下添加一个路由组件（二级页面需要）

main.js

import Vue from 'vue'

import router from './routers/index'

import App from './App.vue'

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

Vue.use(Antd);


Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

路由文件

import Layout from "@/views/layout/index"

/**
 * auth true登录才能访问，false不需要登录
 * keepAlive true缓存，false不缓存
 */

// 默认路由
export default [
    {
        path: '/',
        component: Layout,
        children: [
            {
                path: '/', // 首页
                meta: { auth: false, keepAlive: false },
                component: resolve => require(['@/views/home/'], resolve)
            },
            {
                path: '/test', // 测试
                meta: { auth: false, keepAlive: false },
                component: resolve => require(['@/views/test/'], resolve)
            }
        ]
    },
    {
        path: '/login',
        component: resolve => require(['@/views/login/'], resolve),
        meta: { auth: false, keepAlive: false },
    },
    {
        path: "/404",
        component: resolve => require(['@/views/notFound/'], resolve),
    }
]

路由权限文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './config'
import Layout from "@/views/layout/index"

const _import = require('./_import_' + process.env.NODE_ENV)

Vue.use(VueRouter)

let getApiRouter = [
    {
        path: '/',
        component: "layout",
        children: [
            {
                path: '/test1', // 测试1
                meta: { auth: false, keepAlive: false },
                component: "test1"
            },
            {
                path: '/test2', // 测试2
                meta: { auth: false, keepAlive: false },
                component: "test2"
            },
            {
                path: '/test3', // 测试3
                meta: { auth: false, keepAlive: false },
                component: "test3"
            },
            {
                path: '/test4', // 测试4
                meta: { auth: false, keepAlive: false },
                component: "test4"
            },
            {
                path: '/user', // 用户列表
                meta: { auth: false, keepAlive: false },
                component: "user"
            },
        ]
    },
    {
        path: '*',
        redirect: "/404"
    }
]

let sumRouter = null

// 路由配置
const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes
})

router.beforeEach((to, from, next) => {
    console.log(to)
    console.log(from)
    if (!sumRouter) {
        // 处理路由
        let dynamicMenu = filterAsyncRouter(getApiRouter)
        // 动态添加路由
        sumRouter = routes.concat(dynamicMenu)
        router.addRoutes(sumRouter)
        next({ ...to, replace: true })
    }
    next()
})

function filterAsyncRouter(asyncRouterMap) {
    const accessedRouters = asyncRouterMap.filter((route) => {
        if (route.component) {
            if (route.component === 'layout') {
                route.component = Layout
            } else {
                route.component = _import(route.component)
            }
        }
        if (route.children && route.children.length) {
            route.children = filterAsyncRouter(route.children)
        }
        return true
    })
    return accessedRouters
}


export default router

其实也没啥好讲的~想看整体代码进到这个传送门。

结束

总结~好像也没啥好总结的，也就那样。