vue实现约定式路由

用于记录，防止遗忘

在Vue项目中实现约定式路由，通常不是Vue框架核心功能的一部分，但可以通过一些工具和库来实现，比如Vue Router配合某些脚手架工具（如Vue CLI插件）或框架（如Nuxt.js、VitePress、Vite插件等）。不过，为了说明如何模拟或实现一个基本的约定式路由系统，我们可以手动创建一个简单的示例，该示例基于Vue Router并根据文件系统的结构来动态构建路由。

请注意，这里我们将手动模拟这个过程，因为Vue Router本身不直接支持基于文件系统的约定式路由。但在实际项目中，你可能会使用Nuxt.js或类似框架，它们已经内置了这种支持。

假设的文件结构

假设我们有一个如下的Vue项目文件结构：

src/  
├── views/  
│   ├── Home.vue  
│   ├── About.vue  
│   └── User/  
│       ├── _id.vue    # 动态路由组件  
│       └── index.vue  # User的默认路由组件  
└── router/  
    ├── index.js       # 路由配置文件  
    └── generateRoutes.js # 用于生成路由的脚本

generateRoutes.js

这个脚本将模拟从文件系统读取文件并生成路由配置的过程：

// 假设这个函数能从文件系统中读取Vue组件的路径（这里仅作为示例）  
function getComponentPath(name) {  
  // 在实际项目中，这里应该是根据文件名动态解析组件路径的逻辑  
  return require.resolve(`../views/${name}.vue`);  
}  
  
// 假设这个函数用于处理嵌套路由和动态路由  
function generateRoutes(path = '', routes = []) {  
  // 这里应该是读取文件系统的代码，但为简化，我们直接模拟  
  const files = [  
    'Home',  
    'About',  
    {  
      name: 'User',  
      children: ['index', '_id']  
    }  
  ];  
  
  files.forEach(file => {  
    if (typeof file === 'string') {  
      routes.push({  
        path: `${path}${file.toLowerCase()}`,  
        component: () => import(/* webpackChunkName: "[request]" */ getComponentPath(file))  
      });  
    } else {  
      // 处理嵌套路由  
      const { name, children } = file;  
      const childRoutes = [];  
      generateRoutes(`${path}${name.toLowerCase()}/`, childRoutes, children);  
      routes.push({  
        path: `${path}${name.toLowerCase()}`,  
        component: () => import(/* webpackChunkName: "[request]" */ getComponentPath(`${name}/index`)),  
        children: childRoutes  
      });  
      // 如果有动态路由，需要特殊处理  
      children.forEach(child => {  
        if (child.startsWith('_')) {  
          const dynamicPath = `${path}${name.toLowerCase()}/:${child.slice(1)}`;  
          childRoutes.push({  
            path: dynamicPath,  
            component: () => import(/* webpackChunkName: "[request]" */ getComponentPath(`${name}/${child}`))  
          });  
        }  
      });  
    }  
  });  
  
  return routes;  
}  
  
export default generateRoutes();

router/index.js

在这个文件中，我们将使用generateRoutes.js生成的路由配置来设置Vue Router：

import Vue from 'vue';  
import Router from 'vue-router';  
import routes from './generateRoutes';  
  
Vue.use(Router);  
  
export default new Router({  
  mode: 'history',  
  base: process.env.BASE_URL,  
  routes  
});

注意

上面的getComponentPath函数和整个generateRoutes逻辑都是高度简化的，并且不包含真实的文件系统读取逻辑。在真实项目中，你可能需要使用fs模块（Node.js）或类似工具来读取文件系统中的文件。
这个示例没有处理所有可能的边缘情况，比如组件路径的解析可能需要根据实际项目结构进行调整。
如果你正在寻找一个现成的解决方案，考虑使用Nuxt.js，它内置了对约定式路由的支持。