项目路由布局

2021-11-23 大约 2 分钟

# 项目路由布局

yicode 项目,默认采用 页面结构即路由 的方式来进行路由组装,我们不需要过多考虑路由方面的问题,一切,都已就绪。

# 页面结构

如下,

src/pages
├── detail
│   ├── index.vue
│   └── route.js
└── index
    ├── index.vue
    └── route.js
1
2
3
4
5
6
7

# 页面访问

那么,我们如何访问首页和详情页呢?

# 页面路由(将“骨”,“架”连为一体)

// 自动导入路由(勿动)------------------------------------------------------
let R = {
    pages: [],
    views: [],
    pageImport: {},
    viewImport: {},
};
R.pageImport = require.context("@src/pages/index", true, /routePage\.js$/);
R.pageImport.keys().map((path) => {
    R.pages.push(R.pageImport(path).default || R.pageImport(path));
});
R.viewImport = require.context("@src/pages/index", true, /routeView\.js$/);
R.viewImport.keys().map((path) => {
    R.views.push(R.viewImport(path).default || R.viewImport(path));
});
// 自动导入路由(勿动)------------------------------------------------------

export default {
    path: "/",
    /**
     * layout 框架层
     * 此处采用默认的 default 框架
     * 如果默认框架不符合你的需求,请不要删除此框架层的导入
     * 直接修改 layout/default 目录下的默认框架层代码即可
     * 如果是类似官网项目,不需要框架层,也请不要将此框架层移除
     * 当做有一个全屏的框架层即可,提高需求变更的灵活性
     * 也给自己留一条退路(其实主要是框架作者的强迫症)
     * 如有问题或建议,请联系作者:chensuiyi.com
     */
    //  如果是登录页这种不需要【架子】的页面,只需要直接导入页面文件即可,下方部分可以删除
    // component: () => import('@src/pages/index/index.vue')
    component: () => import("@src/layout/default/index.vue"),
    children: [
        {
            path: "/",
            component: () => import("@src/pages/index/index.vue"),
            children: [...R.views],
        },
        ...R.pages,
    ],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

如你所见,yicode 不仅提供了项目组织的方式,还提供了大量的【自动化】操作,比如:路由、插件、指令、过滤器、api 等自动导入,可以让我们更加专注与业务实现和更轻松的项目维护。

上次编辑于: 2021年11月23日 13:44
贡献者: chensuiyi