0
点赞
收藏
分享

微信扫一扫

vue3+vite 实现自动导入路由

ixiaoyang8 2022-02-16 阅读 86
import {createRouter, createWebHistory} from 'vue-router'

let _Vue
export default function install(Vue) {
    if (install.installed && _Vue === Vue) return
    install.installed = true
    _Vue = Vue

    //杠+后面的字母变为大写字母并去除杠
    function toCamelCase(str) {
        if (!str) return '';
        return str.replace(/-(\w)/g, function ($0, $1) {
            return $1.toUpperCase()
        })
    }

    //首字母大写
    function capitalizeFirstLetter(str) {
        return str.charAt(0).toUpperCase() + str.slice(1)
    }

    const routerList = [], childrenList = [];
   	// vite导入文件方法
    const requireComponent = import.meta.globEager('./views/**/*.vue');
    //使用文件内name值列表
    const useDefaultNameList = {};
    //不全局导入列表
    const doNotRegisterList = {
        'Home': !0
    };

    //自动注册
    const myModules = {};
    for (let i in requireComponent) {
        const componentConfig = requireComponent[i];
        let camelCaseName, firstLetter,
            componentName = capitalizeFirstLetter(toCamelCase(i.replace('./views/', '')
                .replace(/\//g, '-').replace('.vue', '')));
        if (useDefaultNameList[componentName]) {
            camelCaseName = toCamelCase(componentConfig.default.name);
            componentName = firstLetter = capitalizeFirstLetter(camelCaseName);
        }
        if (myModules[componentName]) continue;
        if (!doNotRegisterList[componentName]) {
            const {params = '', parentName = '', pathIsNullCharacter = false} = componentConfig.default._pageParams || {};
            const component = {
                name: componentName,
                path: !pathIsNullCharacter ? ((parentName ? '' : '/') + componentName + params) : '',
                component: componentConfig.default || componentConfig,
                children: []
            };
            if (parentName) {
                delete component.children;
                const index = childrenList.findIndex(item => item.name === parentName);
                if (index > -1) {
                    childrenList[index].children.push(component);
                } else {
                    childrenList.push({
                        name: parentName,
                        children: [component]
                    })
                }
            } else {
                routerList.push(component)
            }
            myModules[componentName] = !0;
        }
    }
    for (let i = 0; i < routerList.length; i++) {
        let parent = routerList[i];
        let index = childrenList.findIndex(item => item.name === parent.name);
        if (index > -1) {
            let child = childrenList[index];
            childrenList.splice(index, 1);
            parent.children = child.children;
        }
    }
    const routes = [
        {
            path: '/',
            name: 'Home',
            component: () => import("./views/home.vue")
        },
        ...routerList
    ];
    const router = createRouter({
        history: createWebHistory(),
        // history: createWebHashHistory(),
        routes
    })
    Vue.use(router)
}

vue页面

   <template>
  <div class="eventIndex">
    <div>asfkafjasfjafijiofj</div>
    <router-view :key="$route.path" />
    <button @click="jumpPage">继续跳啊</button>
  </div>
</template>

<script>
export default {
  name: "eventIndex",
  //自动导入时需要用到的参数
  _pageParams: {
  //路由需要用到的参数
    params: '/:id?/:menuId?',
    //path是否是''字符串
    pathIsNullCharacter: true,
    //父组件的名字,如果有这个参数,则是子组件
    parentName: ''
  },
  methods: {
    jumpPage(){
      this.$router.push('/EventDetail')
    }
  }
}
</script>

<style scoped>

</style>

请问各位吊大的,有木有更好的方法实现自动导入路由呀!!!

举报

相关推荐

0 条评论