vue3动态路由+页面加载进度条

前言

这个月使用vue3来架构公司后端项目，刚好要弄动态路由，我这里就抛砖引玉一下

开始

ruoter - config.ts

import {RouteRecordRaw} from "vue-router";
import LayoutView from "@/layout/IndexLayoutView.vue";

const routesList: Array<RouteRecordRaw> = [
    {
        path: '/login',
        name: 'login',
        component: () => import(/* webpackChunkName: "login" */ '@/views/login/IndexLoginView.vue')
    },
    {
        path: '/',
        name: 'layout',
        component: LayoutView,
        redirect: '/home',
        children: [
            {
                path: '404',
                component: () => import(/* webpackChunkName: "test" */ '@/views/404.vue'),
                name: '404',
                meta: {
                    title: '404',
                    icon: '#icondashboard',
                    affix: true
                }
            },
            {
                path: 'test',
                component: () => import(/* webpackChunkName: "test" */ '@/views/test/IndexTestView.vue'),
                name: 'Test',
                meta: {
                    title: 'Test',
                    icon: '#icondashboard',
                    affix: true
                }
            },
            {
                path: 'home',
                component: () => import(/* webpackChunkName: "test" */ '@/views/home/IndexHomeView.vue'),
                name: 'Home',
                meta: {
                    title: 'Home',
                    icon: '#icondashboard',
                    affix: true
                }
            }
        ]
    },
    {
        path: "/:catchAll(.*)", // 不识别的path自动匹配404
        redirect: '/404',
    },
];
export default routesList

router - index.ts

import {createRouter, createWebHistory} from "vue-router";
import routesList from "@/router/config";

import NProgress from 'nprogress' // 加载进度条
import 'nprogress/nprogress.css'

// NProgress.inc(0.2);
// NProgress.configure({easing:'ease',speed:2000,showSpinner:false,trickle:false})

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: routesList
});

// 路由拦截
router.beforeEach((to, from, next) => {

  NProgress.start();

  const token = true;
  if (token) {
    // 是否有该路径
    if (to.matched.length > 0 || from.path !== '/') {
      next();
    } else {
      // 防止页面刷新
      if (from.path == '/' && to.matched.length <= 0) {
        next(to.path);
      } else {
        next('/404');
      }
    }
  } else {
    // 反正让你去登录页
    if (to.path == '/login') {
      next();
    } else {
      next('/login');
    }
  }
});
router.afterEach((to,from) => {
  // 关闭进度条
  NProgress.done();
});


// 动态路由
const getApiRouter = [
  {
    path: '/',
    component: "layout",
    children: [
      {
        layoutName: 'layout',
        path: '/test1',
        name: 'Test1',
        component: 'test1',
        meta: {
          title: 'Test1',
          icon: '#icondashboard',
          affix: true
        }
      },
    ]
  },
  {
    layoutName: '',
    path: '/test2',
    name: 'Test2',
    component: 'test2',
    meta: {
      title: 'Test2',
      icon: '#icondashboard',
      affix: true
    }
  },
];

function filterAsyncRouter(asyncRouterMap:any) {
  const accessedRouters = asyncRouterMap.filter((route:any) => {
    if (route.component) {
      if (route.component === 'layout') {
        console.log('..注册主布局 - 暂时用不到...');
      } else {
        console.log('...注册子菜单...');
        const fileName = route.component;
        const file =  route.component[0].toUpperCase() + route.component.substr(1);

        route.component = () => import(`@/views/${fileName}/Index${file}View.vue`);

        if (route.layoutName == 'layout') {
          console.log('...主布局相同...');
          router.addRoute('layout', route);
        } else {
          router.addRoute(route);
        }
      }
    }
    // 递归子菜单
    if (route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children)
    }
    return true
  });
  return accessedRouters
}

function test_run() {
  // 处理路由
  filterAsyncRouter(getApiRouter);
}

test_run();


export default router

main.ts

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);

import router from './router'
import store from './store'


app.use(store);
app.use(router);

app.mount('#app');

总结

其实也没啥好讲的，也就是 通过后端传递过来的数据，然后在进行渲染，注意 addRoute

需要配合 vue-devtools 谷歌扩展 才能看到路由是否添加完成