vite-plugin-pages 路由高级配置 参考

已于 2022-03-01 14:17:04 修改
阅读量8.1k 收藏 21
点赞数 4
分类专栏： vue 文章标签： vue.js javascript 前端
于 2022-03-01 14:14:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43384239/article/details/123204828
版权
本文介绍了如何在 Vue 项目中利用 vite-plugin-pages 动态生成路由，以及结合 vuex 进行权限管理和路由过滤。通过设置 constantRoutes 和 asyncRoutes，根据文件系统、前端或后端动态生成路由，并在 beforeEach 钩子中处理权限，实现动态加载和权限校验。同时，展示了如何根据用户权限过滤路由，并提供了相应的 vuex 模块和 action 方法。
摘要由CSDN通过智能技术生成

vite-plugin-pages 路由高级配置 参考

简介

vue-router是来动态生成路由信息的插件,可以根据对应的文件结构来生成路由信息,不再需要手动的去配置路由.Nuxt中就是相似的方式来实现路由,可以通过nuxtStyle配置项来使用nuxt的方式来设置文件结构.

案例

例如我的vue目录如下:

image-20220301135354370

页面效果

image-20220301135443850

路由文件这样配置

image-20220301135502060

所有在 pages页面下的文件都会自动添加到generatedRoutes里，那怎么对generatedRoutes进行配置，比如添加常路由，异步路由，权限管理？

先来打印下 这个所谓的generatedRoutes

image-20220301140720925

发现和我们手动引用的区别不大，下一步就可以使用vuerouter方法进行处理路由了

参照的项目是fantastic-admin-master Fantastic-admin: ⭐⭐⭐⭐⭐)

1.区分 constantRoutes和 asyncRoutes

import { setupLayouts } from 'virtual:generated-layouts'
import generatedRoutes from 'virtual:generated-pages'

if (useSettingsOutsideStore().app.routeBaseOn === 'filesystem') {
    constantRoutes = generatedRoutes.filter(item => {
        return item.meta?.enabled !== false && item.meta?.constant === true
    })
    asyncRoutes = setupLayouts(generatedRoutes.filter(item => {
        return item.meta?.enabled !== false && item.meta?.constant !== true && item.meta?.layout !== false
    }))
}

2.router.beforeEach拦截

注意 routeOutsideStore.generateRoutesAtFront(asyncRoutes) 这个方法，动态加载

 switch (settingsOutsideStore.app.routeBaseOn) {
                case 'frontend':
                    await routeOutsideStore.generateRoutesAtFront(asyncRoutes)
                    break
                case 'backend':
                    await routeOutsideStore.generateRoutesAtBack()
                    break
                case 'filesystem':
                    await routeOutsideStore.generateRoutesAtFilesystem(asyncRoutes)
                    switch (settingsOutsideStore.menu.baseOn) {
                        case 'frontend':
                            await menuOutsideStore.generateMenusAtFront()
                            break
                        case 'backend':
                            await menuOutsideStore.generateMenusAtBack()
                            break
                    }
                    break
            }

在vuex实现，几个方法

    actions: {
            // 根据权限动态生成路由（前端生成）
            generateRoutesAtFront(asyncRoutes) {
                // eslint-disable-next-line no-async-promise-executor
                return new Promise(async resolve => {
                    const settingsStore = useSettingsStore()
                    const userStore = useUserStore()
                    let accessedRoutes
                    // 如果权限功能开启，则需要对路由数据进行筛选过滤
                    if (settingsStore.app.enablePermission) {
                        const permissions = await userStore.getPermissions()
                        accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
                    } else {
                        accessedRoutes = deepClone(asyncRoutes)
                    }
                    // 设置 routes 数据
                    this.isGenerate = true
                    this.routes = accessedRoutes.filter(item => item.children.length != 0)
                    resolve()
                })
            },
            // 根据权限动态生成路由（后端获取）
            generateRoutesAtBack() {
                return new Promise(resolve => {
                    api.get('route/list', {
                        baseURL: '/mock/'
                    }).then(async res => {
                        const settingsStore = useSettingsStore()
                        const userStore = useUserStore()
                        let asyncRoutes = formatBackRoutes(res.data)
                        let accessedRoutes
                        // 如果权限功能开启，则需要对路由数据进行筛选过滤
                        if (settingsStore.app.enablePermission) {
                            const permissions = await userStore.getPermissions()
                            accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
                        } else {
                            accessedRoutes = deepClone(asyncRoutes)
                        }
                        // 设置 routes 数据
                        this.isGenerate = true
                        this.routes = accessedRoutes.filter(item => item.children.length != 0)
                        resolve()
                    })
                })
            },
            // 根据权限动态生成路由（文件系统生成）
            generateRoutesAtFilesystem(asyncRoutes) {
                // eslint-disable-next-line no-async-promise-executor
                return new Promise(async resolve => {
                    const settingsStore = useSettingsStore()
                    const userStore = useUserStore()
                    let accessedRoutes
                    // 如果权限功能开启，则需要对路由数据进行筛选过滤
                    if (settingsStore.app.enablePermission) {
                        const permissions = await userStore.getPermissions()
                        accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
                    } else {
                        accessedRoutes = deepClone(asyncRoutes)
                    }
                    // 设置 routes 数据
                    this.isGenerate = true
                    this.routes = accessedRoutes.filter(item => item.children.length != 0)
                    resolve()
                })
            },
            // 记录 accessRoutes 路由，用于登出时删除路由
            setCurrentRemoveRoutes(routes) {
                this.currentRemoveRoutes = routes
            },
            // 清空路由
            removeRoutes() {
                this.isGenerate = false
                this.routes = []
                this.currentRemoveRoutes.forEach(removeRoute => {
                    removeRoute()
                })
                this.currentRemoveRoutes = []
            }
        }

filterAsyncRoutes 方法

function filterAsyncRoutes(routes, permissions) {
    const res = []
    routes.forEach(route => {
        let tmpRoute = deepClone(route)
        if (hasPermission(permissions, tmpRoute)) {
            if (tmpRoute.children) {
                tmpRoute.children = filterAsyncRoutes(tmpRoute.children, permissions)
                tmpRoute.children.length && res.push(tmpRoute)
            } else {
                res.push(tmpRoute)
            }
        }
    })
    return res
}

参考

1.src\store\modules\route.js

import { defineStore } from 'pinia'
import { piniaStore } from '@/store'
import { deepClone, isExternalLink } from '@/util'
import api from '@/api'

import { useSettingsStore } from './settings'
import { useUserStore } from './user'

function hasPermission(permissions, route) {
    let isAuth = false
    if (route.meta && route.meta.auth) {
        isAuth = permissions.some(auth => {
            if (typeof route.meta.auth == 'string') {
                return route.meta.auth === auth
            } else {
                return route.meta.auth.some(routeAuth => {
                    return routeAuth === auth
                })
            }
        })
    } else {
        isAuth = true
    }
    return isAuth
}

function filterAsyncRoutes(routes, permissions) {
    const res = []
    routes.forEach(route => {
        let tmpRoute = deepClone(route)
        if (hasPermission(permissions, tmpRoute)) {
            if (tmpRoute.children) {
                tmpRoute.children = filterAsyncRoutes(tmpRoute.children, permissions)
                tmpRoute.children.length && res.push(tmpRoute)
            } else {
                res.push(tmpRoute)
            }
        }
    })
    return res
}

function formatBackRoutes(routes, views = import.meta.glob('../../views/**/*.vue')) {
    return routes.map(route => {
        switch (route.component) {
            case 'Layout':
                route.component = () => import('@/layout/index.vue')
                break
            default:
                if (route.component) {
                    route.component = views[`../../views/${route.component}`]
                }
        }
        if (route.children) {
            route.children = formatBackRoutes(route.children, views)
        }
        return route
    })
}

// 将多层嵌套路由处理成平级
function flatAsyncRoutes(routes, breadcrumb, baseUrl = '') {
    let res = []
    routes.forEach(route => {
        if (route.children) {
            let childrenBaseUrl = ''
            if (baseUrl == '') {
                childrenBaseUrl = route.path
            } else if (route.path != '') {
                childrenBaseUrl = `${baseUrl}/${route.path}`
            }
            let childrenBreadcrumb = deepClone(breadcrumb)
            if (route.meta.breadcrumb !== false) {
                childrenBreadcrumb.push({
                    path: childrenBaseUrl,
                    title: route.meta.title
                })
            }
            let tmpRoute = deepClone(route)
            tmpRoute.path = childrenBaseUrl
            tmpRoute.meta.breadcrumbNeste = childrenBreadcrumb
            delete tmpRoute.children
            res.push(tmpRoute)
            let childrenRoutes = flatAsyncRoutes(route.children, childrenBreadcrumb, childrenBaseUrl)
            childrenRoutes.map(item => {
                // 如果 path 一样则覆盖，因为子路由的 path 可能设置为空，导致和父路由一样，直接注册会提示路由重复
                if (res.some(v => v.path == item.path)) {
                    res.forEach((v, i) => {
                        if (v.path == item.path) {
                            res[i] = item
                        }
                    })
                } else {
                    res.push(item)
                }
            })
        } else {
            let tmpRoute = deepClone(route)
            if (baseUrl != '' && !isExternalLink(tmpRoute.path)) {
                if (tmpRoute.path != '') {
                    tmpRoute.path = `${baseUrl}/${tmpRoute.path}`
                } else {
                    tmpRoute.path = baseUrl
                }
            }
            // 处理面包屑导航
            let tmpBreadcrumb = deepClone(breadcrumb)
            if (tmpRoute.meta.breadcrumb !== false) {
                tmpBreadcrumb.push({
                    path: tmpRoute.path,
                    title: tmpRoute.meta.title
                })
            }
            tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
            res.push(tmpRoute)
        }
    })
    return res
}

export const useRouteStore = defineStore(
    // 唯一ID
    'route',
    {
        state: () => ({
            isGenerate: false,
            routes: [],
            currentRemoveRoutes: []
        }),
        getters: {
            // 扁平化路由（将三级及以上路由数据拍平成二级）
            flatRoutes: state => {
                const settingsStore = useSettingsStore()
                let routes = []
                if (state.routes) {
                    if (settingsStore.app.routeBaseOn !== 'filesystem') {
                        state.routes.map(item => {
                            routes.push(...deepClone(item.children))
                        })
                        routes.map(item => {
                            if (item.children) {
                                item.children = flatAsyncRoutes(item.children, [{
                                    path: item.path,
                                    title: item.meta.title
                                }], item.path)
                            }
                        })
                    } else {
                        state.routes.map(item => {
                            routes.push(deepClone(item))
                        })
                    }
                }
                return routes
            }
        },
        actions: {
            // 根据权限动态生成路由（前端生成）
            generateRoutesAtFront(asyncRoutes) {
                // eslint-disable-next-line no-async-promise-executor
                return new Promise(async resolve => {
                    const settingsStore = useSettingsStore()
                    const userStore = useUserStore()
                    let accessedRoutes
                    // 如果权限功能开启，则需要对路由数据进行筛选过滤
                    if (settingsStore.app.enablePermission) {
                        const permissions = await userStore.getPermissions()
                        accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
                    } else {
                        accessedRoutes = deepClone(asyncRoutes)
                    }
                    // 设置 routes 数据
                    this.isGenerate = true
                    this.routes = accessedRoutes.filter(item => item.children.length != 0)
                    resolve()
                })
            },
            // 根据权限动态生成路由（后端获取）
            generateRoutesAtBack() {
                return new Promise(resolve => {
                    api.get('route/list', {
                        baseURL: '/mock/'
                    }).then(async res => {
                        const settingsStore = useSettingsStore()
                        const userStore = useUserStore()
                        let asyncRoutes = formatBackRoutes(res.data)
                        let accessedRoutes
                        // 如果权限功能开启，则需要对路由数据进行筛选过滤
                        if (settingsStore.app.enablePermission) {
                            const permissions = await userStore.getPermissions()
                            accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
                        } else {
                            accessedRoutes = deepClone(asyncRoutes)
                        }
                        // 设置 routes 数据
                        this.isGenerate = true
                        this.routes = accessedRoutes.filter(item => item.children.length != 0)
                        resolve()
                    })
                })
            },
            // 根据权限动态生成路由（文件系统生成）
            generateRoutesAtFilesystem(asyncRoutes) {
                // eslint-disable-next-line no-async-promise-executor
                return new Promise(async resolve => {
                    const settingsStore = useSettingsStore()
                    const userStore = useUserStore()
                    let accessedRoutes
                    // 如果权限功能开启，则需要对路由数据进行筛选过滤
                    if (settingsStore.app.enablePermission) {
                        const permissions = await userStore.getPermissions()
                        accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
                    } else {
                        accessedRoutes = deepClone(asyncRoutes)
                    }
                    // 设置 routes 数据
                    this.isGenerate = true
                    this.routes = accessedRoutes.filter(item => item.children.length != 0)
                    resolve()
                })
            },
            // 记录 accessRoutes 路由，用于登出时删除路由
            setCurrentRemoveRoutes(routes) {
                this.currentRemoveRoutes = routes
            },
            // 清空路由
            removeRoutes() {
                this.isGenerate = false
                this.routes = []
                this.currentRemoveRoutes.forEach(removeRoute => {
                    removeRoute()
                })
                this.currentRemoveRoutes = []
            }
        }
    }
)

export function useRouteOutsideStore() {
    return useRouteStore(piniaStore)
}

2.src\router\index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import { useSettingsOutsideStore } from '@/store/modules/settings'
import { useKeepAliveOutsideStore } from '@/store/modules/keepAlive'
import { useUserOutsideStore } from '@/store/modules/user'
import { useMenuOutsideStore } from '@/store/modules/menu'
import { useRouteOutsideStore } from '@/store/modules/route'

import '@/assets/styles/nprogress.scss'
import { useNProgress } from '@vueuse/integrations/useNProgress'
const { isLoading } = useNProgress()

// 固定路由
let constantRoutes = [
    {
        path: '/login',
        name: 'login',
        component: () => import('@/views/login.vue'),
        meta: {
            title: '登录'
        }
    },
    {
        path: '/',
        component: () => import('@/layout/index.vue'),
        redirect: '/dashboard',
        children: [
            {
                path: 'dashboard',
                name: 'dashboard',
                component: () => import('@/views/index.vue'),
                meta: {
                    title: () => {
                        const settingsOutsideStore = useSettingsOutsideStore()
                        return settingsOutsideStore.dashboard.title
                    }
                }
            },
            {
                path: 'personal/setting',
                name: 'personalSetting',
                component: () => import('@/views/personal/setting.vue'),
                meta: {
                    title: '个人设置',
                    cache: 'personalEditPassword',
                    breadcrumbNeste: [
                        { title: '个人设置', path: '/personal/setting' }
                    ]
                }
            },
            {
                path: 'personal/edit/password',
                name: 'personalEditPassword',
                component: () => import('@/views/personal/edit.password.vue'),
                meta: {
                    title: '修改密码',
                    breadcrumbNeste: [
                        { title: '修改密码', path: '/personal/edit/password' }
                    ]
                }
            },
            {
                path: 'reload',
                name: 'reload',
                component: () => import('@/views/reload.vue')
            }
        ]
    }
]

import MultilevelMenuExample from './modules/multilevel.menu.example'
import BreadcrumbExample from './modules/breadcrumb.example'
import KeepAliveExample from './modules/keep.alive.example'
import ComponentBasicExample from './modules/component.basic.example'
import ComponentExtendExample from './modules/component.extend.example'
import PermissionExample from './modules/permission.example'
import MockExample from './modules/mock.example'
import JsxExample from './modules/jsx.example'
import ExternalLinkExample from './modules/external.link.example'
// import VideosExample from './modules/videos.example'
import EcologyExample from './modules/ecology.example'
import CooperationExample from './modules/cooperation.example'

// 动态路由（异步路由、导航栏路由）
let asyncRoutes = [
    {
        meta: {
            title: '演示',
            icon: 'sidebar-default'
        },
        children: [
            MultilevelMenuExample,
            BreadcrumbExample,
            KeepAliveExample,
            ComponentBasicExample,
            ComponentExtendExample,
            PermissionExample,
            MockExample,
            JsxExample,
            ExternalLinkExample
        ]
    },
    // {
    //     meta: {
    //         title: '教程',
    //         icon: 'sidebar-videos'
    //     },
    //     children: [
    //         ...VideosExample
    //     ]
    // },
    {
        meta: {
            title: '生态',
            icon: 'sidebar-ecology'
        },
        children: [
            ...EcologyExample
        ]
    },
    {
        meta: {
            title: '战略合作',
            icon: 'sidebar-cooperation'
        },
        children: [
            ...CooperationExample
        ]
    }
]

const lastRoute = {
    path: '/:all(.*)*',
    name: 'notFound',
    component: () => import('@/views/[...all].vue'),
    meta: {
        title: '找不到页面'
    }
}

import { setupLayouts } from 'virtual:generated-layouts'
import generatedRoutes from 'virtual:generated-pages'

if (useSettingsOutsideStore().app.routeBaseOn === 'filesystem') {
    constantRoutes = generatedRoutes.filter(item => {
        return item.meta?.enabled !== false && item.meta?.constant === true
    })
    asyncRoutes = setupLayouts(generatedRoutes.filter(item => {
        return item.meta?.enabled !== false && item.meta?.constant !== true && item.meta?.layout !== false
    }))
}

const router = createRouter({
    history: createWebHashHistory(),
    routes: constantRoutes
})

router.beforeEach(async(to, from, next) => {
    const settingsOutsideStore = useSettingsOutsideStore()
    const userOutsideStore = useUserOutsideStore()
    const menuOutsideStore = useMenuOutsideStore()
    const routeOutsideStore = useRouteOutsideStore()
    settingsOutsideStore.app.enableProgress && (isLoading.value = true)
    // 是否已登录
    if (userOutsideStore.isLogin) {
        // 是否已根据权限动态生成并挂载路由
        if (routeOutsideStore.isGenerate) {
            // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态
            settingsOutsideStore.menu.menuMode !== 'single' && menuOutsideStore.setActived(to.path)
            if (to.name) {
                if (to.matched.length !== 0) {
                    // 如果已登录状态下，进入登录页会强制跳转到控制台页面
                    if (to.name == 'login') {
                        next({
                            name: 'dashboard',
                            replace: true
                        })
                    } else if (!settingsOutsideStore.dashboard.enable && to.name == 'dashboard') {
                        // 如果未开启控制台页面，则默认进入侧边栏导航第一个模块
                        if (menuOutsideStore.sidebarMenus.length > 0) {
                            next({
                                path: menuOutsideStore.sidebarMenusFirstDeepestPath,
                                replace: true
                            })
                        } else {
                            next()
                        }
                    } else {
                        next()
                    }
                } else {
                    // 如果是通过 name 跳转，并且 name 对应的路由没有权限时，需要做这步处理，手动指向到 404 页面
                    next({
                        path: '/404'
                    })
                }
            } else {
                next()
            }
        } else {
            switch (settingsOutsideStore.app.routeBaseOn) {
                case 'frontend':
                    await routeOutsideStore.generateRoutesAtFront(asyncRoutes)
                    break
                case 'backend':
                    await routeOutsideStore.generateRoutesAtBack()
                    break
                case 'filesystem':
                    await routeOutsideStore.generateRoutesAtFilesystem(asyncRoutes)
                    switch (settingsOutsideStore.menu.baseOn) {
                        case 'frontend':
                            await menuOutsideStore.generateMenusAtFront()
                            break
                        case 'backend':
                            await menuOutsideStore.generateMenusAtBack()
                            break
                    }
                    break
            }
            let removeRoutes = []
            routeOutsideStore.flatRoutes.forEach(route => {
                if (!/^(https?:|mailto:|tel:)/.test(route.path)) {
                    removeRoutes.push(router.addRoute(route))
                }
            })
            if (settingsOutsideStore.app.routeBaseOn === 'filesystem') {
                const otherRoutes = generatedRoutes.filter(item => item.meta?.constant !== true && item.meta?.layout === false)
                otherRoutes.length && removeRoutes.push(router.addRoute(...otherRoutes))
            } else {
                removeRoutes.push(router.addRoute(lastRoute))
            }
            // 记录的 accessRoutes 路由数据，在登出时会使用到，不使用 router.removeRoute 是考虑配置的路由可能不一定有设置 name ，则通过调用 router.addRoute() 返回的回调进行删除
            routeOutsideStore.setCurrentRemoveRoutes(removeRoutes)
            next({ ...to, replace: true })
        }
    } else {
        if (to.name != 'login') {
            next({
                name: 'login',
                query: {
                    redirect: to.fullPath
                }
            })
        } else {
            next()
        }
    }
})

router.afterEach((to, from) => {
    const settingsOutsideStore = useSettingsOutsideStore()
    const keepAliveOutsideStore = useKeepAliveOutsideStore()
    settingsOutsideStore.app.enableProgress && (isLoading.value = false)
    // 设置页面 title
    to.meta.title && settingsOutsideStore.setTitle(typeof to.meta.title === 'function' ? to.meta.title() : to.meta.title)
    // 判断当前页面是否开启缓存，如果开启，则将当前页面的 name 信息存入 keep-alive 全局状态
    if (to.meta.cache) {
        let componentName = to.matched[to.matched.length - 1].components.default.name
        if (componentName) {
            keepAliveOutsideStore.add(componentName)
        } else {
            console.warn('该页面组件未设置组件名，会导致缓存失效，请检查')
        }
    }
    // 判断离开页面是否开启缓存，如果开启，则根据缓存规则判断是否需要清空 keep-alive 全局状态里离开页面的 name 信息
    if (from.meta.cache) {
        let componentName = from.matched[from.matched.length - 1].components.default.name
        // 通过 meta.cache 判断针对哪些页面进行缓存
        switch (typeof from.meta.cache) {
            case 'string':
                if (from.meta.cache != to.name) {
                    keepAliveOutsideStore.remove(componentName)
                }
                break
            case 'object':
                if (!from.meta.cache.includes(to.name)) {
                    keepAliveOutsideStore.remove(componentName)
                }
                break
        }
        // 如果进入的是 reload 页面，则也将离开页面的缓存清空
        if (to.name == 'reload') {
            keepAliveOutsideStore.remove(componentName)
        }
    }
})

export default router
我们爱学习
关注
专栏目录
vue-plugin-Pages自动配置路由
lingshengxiyou的博客
03-28 1583
('/src/views/login.vue'), name: 'login' } // 处理后 { path: '/login', component: () =>
vite-plugin-react-pages:一个构建React应用程序的Vite框架。 特别适用于react组件的文档站点和演示场
03-07
:blue_book: vite-plugin-react-page （vite-pages）是由提供支持的React应用程序框架。 非常适合： 博客网站 您的图书馆或产品的文档站点 React组件的story（demos）开发（例如 ） 它提供了许多功能，可帮助开发人员快速构建React App ： 奇妙的开发经验。 即使您有很多页面，也可以瞬间启动本地开发服务器。 热模块替换可与React和Mdx一起使用，因此您在编辑代码时可以获得即时反馈。 基于文件系统的路由。 通过遵循，可以轻松创建，定位和开发页面。 您无需担心路由配置。 对于高级用户，，以便vite-pages可以与任何项目文件结构一起使用。 支持Mdx 。 您可以使用“普通React”或编写内容。 普通的Reactjs更加灵活和可组合。 虽然Mdx更具可读性且易于编辑。 您可以为任务选择适当的格式。 这些格式可以像正常的esModu
vite-plugin-pages:基于文件系统的Vite路由生成器
03-11
Vite插件页面 使用Vue 3应用程序的基于文件系统的路由 入门 安装页面： $ npm install -D vite-plugin-pages 添加到您的vite.config.js ： import Vue from '@vitejs/plugin-vue' ; import Pages from 'vite-plugin-pages' ; export default { plugins : [ Vue ( ) , Pages ( ) ] , } ; 概述 默认情况下，页面是从src/pages目录中的.vue或.js文件导出的Vue组件。 您可以通过在应用程序中导入virtual:generated-pages模块来访问生成的路由。 import { createRouter } from 'vue-router' ; import routes from 'v
vite-plugin-papes、vite-plugin-vue-layouts、unplugin-vue-components、unplugin-auto-import
小卡拉米的博客
03-03 1934
可以读取指定的目录文件，自动化生成路由信息，高效快捷开发vite.config.ts配置main.ts配置env.ts配置自动生成vue-router的路由映射规则将得到如下的路由配置信息。
vite-plugin-pages 使用教程
gitblog_01179的博客
08-09 321
vite-plugin-pages 使用教程 vite-plugin-pagesFile system based route generator for ⚡️Vite项目地址:https://gitcode.com/gh_mirrors/vi/vite-plugin-pages 项目介绍 vite-plugin-pages 是一个用于 Vite 的插件，旨在简化基于文件系统的路由生成。它允许开...
vite-plugin-pages
MCCLS的博客
07-11 1628
使用 vite-plugin-pages 之后：就可以更高效快捷开发。只需要在目录写好对应页面，即可自动生成路由, 上面的路由对应的文件结构如下。注意： 当然这里使用了 pages , 因为是默认配置, 你也可以配置成原来大家更习惯的 views。
vue3+vite中自动配置路由的神器：vite-plugin-pages
浩星
07-21 5599
在写vue3+vite组合的项目中，很多时候我们都需要配置本地路由，实际vite有个神器来提高效率，把配置本地路由的工作代替我们处理掉。
【VUE3】使用 Vite 插件 Vite-plugin-pages 和 Vite-plugin-vue-layouts 构建管理后台嵌套路由
weixin_51083890的博客
09-12 2626
本文介绍了如何使用 Vite 的两个插件 Vite-plugin-pages 和 Vite-plugin-vue-layouts 构建管理后台的嵌套路由。通过这两个插件的结合使用，我们可以轻松地实现管理后台的模块化和路由配置，提高开发效率。
vue3+vite插件配置系列1-vite-plugin-pages搭配vue-router
个人博客
02-20 5860
vite插件，可以读取文件夹下的vue文件，生成vue-router的路由信息，减少代码工作量
vite-plugin-pages如何根据权限生成动态路由
02-22
我可以给你一些关于 vite-plugin-pages 动态路由权限生成的建议： 1.使用vue-router提供的动态路由功能；2.根据用户权限来生成动态路由；3.使用vite-plugin-pages来提供路由配置；4.根据用户权限管理路由配置。
vite-plugin-mpa:MPA（多页应用程序）
04-08
Vite-plugin-mpa 开箱即用的多页面应用程序，用于Vite，支持Vue2 / 3，React等 动机 访问本机支持多页，但必须配置rollupOptions.input 在访问开发人员时，必须为$projectRoot/src/pages/index/xxx.html打开localhost:3000/src/pages/index/xxx.html $projectRoot/src/pages/index/xxx.html vue-cli帮助重写MPA的URL，此插件执行相同的操作并自动为您打开第一页 实验：构建时，为您整理文件夹（如vue-cli）， dist/src/pages/subpage/index.html将移至dist/subpage/index.html 用法 yarn add vite-plugin-mpa // vite.config.ts impo
vite-pages:使用:high_voltage:Vite的glob导入生成路由
03-20
访问页面 使用的vue-router的基于文件系统的路由生成器。 入门 安装页面页面： $ npm install vite-pages 添加到您的应用程序条目中： import App from './App.vue' import { createApp } from 'vue' import { createRouter , createWebHistory } from 'vue-router' import { generateRoutes } from 'vite-pages' // https://vitejs.dev/guide/features.html#glob-import const pages = import . meta . glob ( './pages/**/*.vue' ) const options = { } const routes = gen
vite-plugin-voie:Vite的基于文件系统的路由插件
03-11
声音 :motorway: 使用Vue 3应用程序的基于文件系统的路由 Voie是Vite插件，可将基于文件系统的路由引入Vue 3应用程序。 入门 安装Voie： 从^0.7.x支持Vite 2，不再支持Vite 1 $ npm install -D vite-plugin-voie 注意： vue-router@^4是对等依赖项 添加到您的vite.config.js ： import vue from '@vitejs/plugin-vue' ; import voie from 'vite-plugin-voie' ; export default { plugins : [ vue ( ) , voie ( ) ] , } ; 概述 默认情况下，页面是从src/pages目录中的.vue或.js文件导出的Vue组件。 您可以通过在应用程序中导入voie-pages模块来访问生成的路
探索前端新纪元：vite-plugin-pages 开源项目深度解析
最新发布
gitblog_00125的博客
08-09 370
探索前端新纪元：vite-plugin-pages 开源项目深度解析 vite-plugin-pagesFile system based route generator for ⚡️Vite项目地址:https://gitcode.com/gh_mirrors/vi/vite-plugin-pages 在现代前端开发中，路由管理是构建动态Web应用的核心。随着Vite的崛起，vite-plug...
vue-router配置vite-plugin-pages
THKTHK1024的博客
07-05 329
注：pages文件夹需要index.vue文件。
vite-plugin-pages(用于本人使用)
tjq11111的博客
06-08 3774
vite-plugin-pages 的使用
vite-plugin-pages 教程
gitblog_01118的博客
08-09 381
vite-plugin-pages 教程 vite-plugin-pagesFile system based route generator for ⚡️Vite项目地址:https://gitcode.com/gh_mirrors/vi/vite-plugin-pages 1. 项目目录结构及介绍 vite-plugin-pages 是一款用于 Vite 的插件，它可以自动化生成 Vue R...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值