vite+vue3+ts+vuex+vue-router4.0路由总结

安装路由
yarn add vue-router@4
浅谈路由
根据项目需求，动态路由的部分从后端数据获取，获取的格式如下:

//模拟后端返回的数据
const menuLsit: Array<any> = [
    {
        url: "/home/person-home",
        name: "首页",
        meta: {
            title: "首页", icon: "HomeFilled"
        },
        children: [],
    },
    {
        url: "/list/list",
        name: "列表",
        meta: {
            title: "列表", icon: "Menu"
        },
        children: []
    },
    {
        url: "/system",
        name: "系统管理",
        meta: { title: "系统管理", icon: "tools" },
        children: [
            {
                url: "/system/user/user",
                name: "用户管理",
                meta: { title: "用户管理", icon: "User" },
                children: []
            },
            {
                url: "/system/menu/menu",
                name: "菜单管理",
                meta: {
                    title: "菜单管理", icon: "Menu"
                },
                children: []
            }, {

                url: "/system/operationRecord",
                name: "操作记录",
                meta: { title: "操作记录", icon: "tools" },
                children: [
                    {
                        url: "/system/operationRecord/loginRecord/loginError",
                        name: "异常日志",
                        meta: { title: "异常日志", icon: "User" },
                        children: []
                    },
                ]
            }
        ]
    },
    {
        url: "/form",
        meta: { title: "表单", icon: "Minus" },
        name: "表单",
        children: [
            {
                url: "/form/index",
                name: "表单管理",
                meta: { title: "表单管理", icon: "Minus" },
                children: []
            },
        ]
    },
];

export default menuLsit

数据从后端获取需要调用接口得到数据，如图所示

返回的格式需要做处理，动态路由的格式如下

import store from "@/store/index"
let temp: any[] = []
let list: any[] = []
//处理动态路径
export function routerPackag(itemList?: any) {
    itemList = JSON.parse(JSON.stringify(store.getters.menuLsit))
    if (itemList && itemList.length > 0) {
        getComponent(itemList)
        functionPackag(temp)
        return list
    }
}
const getComponent = (data: any[]) => {
    data.map((item: any, key: number) => {
        item.component = `../view${item.url}.vue`,
            item.path = item.url,
            item.meta = { title: item.name, icon: item.icon };
        item.name = item.name;
        if (item.children && item.children) {
            getComponent(item.children)
        }
        temp.push(item)
    })
}
function functionPackag(itemList: any) {
    const modules = import.meta.glob('../view/**/**.vue');
    const childrenList: Array<any> = []
    if (itemList) {
        itemList.map((item: any) => {
            if (item.component) {
                for (let key in modules) {
                    if (key === item.component) {
                        item.component = modules[key]
                        const obj: any = {
                            path: item.url,
                            name: item.name,
                            meta: item.meta,
                            component: item.component
                        }
                        childrenList.push(obj)
                    }
                }
            }
        })
    }
    //路由去重
    // let arr: any[] = childrenList
    // let hash = {};
    // const newArr = arr.reduce((item, next) => {
    //     hash[next.path] ? '' : hash[next.path] = true && item.push(next);
    //     return item
    // }, []);
    return list = childrenList

}

注：使用import.meta.glob动态添加vue页面
const modules = import.meta.glob('../view/**/**.vue');

一切准备就绪之后开始使用，本次使用的是动态路由和静态路由的组合
静态路由有如下：

创建一个可以被 Vue 应用程序使用的路由实例

导航守卫和动态路由的添加

import { getToken } from "@/utils/auth";
import { configure, start, done } from 'nprogress'
import store from '@/store/index'
import routers from "@/router";
import { routerPackag } from "@/router/router";
import * as Types from '@/store/modules/types'
import { RouteRecordRaw } from 'vue-router';
routers.beforeEach(async (to, from, next) => {
    start()
    if (getToken()) {
        if (to.path !== '/login') {
            let userAll = JSON.parse(JSON.stringify(store.getters.userAll))
            let list: any
            if (userAll.length === 0) {
                store.dispatch(Types.USER_ALL)
                let menuLsit: any[] = []
                await store.dispatch(Types.TOP_MENU_LIST)
                await store.dispatch(Types.MENU_LIST).then(res => {
                    menuLsit = res
                    store.commit(Types.MENU_LIST, menuLsit)
                    if (menuLsit.length > 0) {
                        list = routerPackag()
                        list.map((r: RouteRecordRaw) => {
                            routers.addRoute("main", r)
                        })

                        next({ ...to, replace: true })
                    }
                })

            } else {
                next()

            }
        }
    } else {
        if (to.path === '/login') {
            next()
        } else {
            next({ path: '/login' });
        }
    }
})
routers.afterEach(() => {
    done();//结束加载动画
})

addRoute
4.0的使用

addRoute和addRoutes的区别

addRoutes传入数组
addRoute传入单个