Vue3 dynamic routing + page loading progress bar

foreword

This month, I use vue3 to build the company's back-end project. I just want to do dynamic routing. I'll throw a brick here.

start

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