Skip to content

页面与路由

重要概念:一个路由等于一个目录!

什么意思呢?

src/pages 目录下,是放置 页面 的目录

注意:如果将 pages 改名或者删除,项目将无法显示,这就是 约定大于配置 的理念!

避免 千人千面,用一些 强制规则,来增强项目开发的统一性,不同人员开发的协同性,以及后期的可维护性。

试想一下

  • 同事A 把页面放到 views 里面。
  • 同事B 把页面放到 pages 里面。
  • 同事C 把页面放到 htmls 里面。

烦不烦?当然烦啊。

问:那团队可以做好规范啊,规定把页面放到某个目录名称下。

只要是人为规定的东西,就能轻易地被改变!

yite-cli 强制只能把页面放到 pages 目录下,不放到这你的项目就开发不了。

不管是 同事A同事B同事C 还是 同事N...,任何人,只要拿到 yite-cli 脚手架驱动的项目。

他立刻!马上!百分百确定!pages 可以看到整个项目的页面!

而这!只是 yite-cli 脚手架的冰山一角!

更多的约定规范和开发规范,请继续阅读本文档,了解更多,就会越发感叹,yite-cli 的神奇。

创建页面

咱们通过实际案例来分析一下,创建一个 news 页面和其对应的路由,应该怎么做。

首先,在 pages 目录下,创建一个 news 目录。

然后,在 news 目录下,分别创建 route.jsindex.vue 文件。

其中,index.vue 文件,就正常写页面的方式就好。

注意:yite-cli 是专门用于 vite + vue3 的项目开发脚手架。

如果你使用 vue2 的语法,开发过程中,遇到相关问题,作者将不会予以解答。

bash
└───📁 pages/
    └───📁 news/
        ├───📄 index.vue
        └───📄 route.js

最后,route.js 文件的内容如下。

javascript
export default {};

注意:route.js 只支持 export default 导出,其他方式将不会生效。

这也是 yite-cli约定 之一。

OK,一个页面开发完毕了,现在访问 #/news,就能看到页面效果。

什么?我路由还没配置呢?

哈哈,同学,这正是 yite-cli 的魅力之一。

所有 pages 目录下的,具有 route.js 文件的目录,都会自动生成路由。

咱们举个更加极端的例子,假设咱们有一个这样的文件结构:

bash
└───📁 pages/
    └───📁 test1/
        └───📁 test2/
            └───📁 test3/
                └───📁 test4/
                    └───📁 test5/
                        ├───📄 index.vue
                        └───📄 route.js

那么它的访问路由便是:#/test1/test2/test3/test4/test5

这就是 yite-cli自动路由 功能!

让我们跟繁琐的路由配置,说拜拜!

不过,需要注意的是,有 route.js 的地方,必有 index.vue

否则,路由生成了,但是页面找不到,也是不行的。

修改页面名称

有一个这样的问题,因为咱们的页面文件都是 index.vue,导致我们调试页面的时候,并不方便定位组件。

picture 2

如上图所示,是由 yite-cli 驱动的,由 随易科技 开源的 后台管理 项目。

因为页面文件名称是 index.vue,所以我们使用调试工具看到的组件名称就是默认的文件名 index

这并不便于锁定需要调试的页面。

那么我们可以这么做:

vue
<script setup>
// 内部集
import editDataDrawer from './components/editDataDrawer.vue';

// 外部集

// 选项集
defineOptions({
    name: 'loginLog'
});

// 全局集
const { $GlobalData, $GlobalComputed, $GlobalMethod } = useGlobal();

// 工具集

// 数据集
const $Data = $ref({
    // 页面配置
    pageConfig: {
        name: '登录日志'
    },
    // 显示和隐藏
    isShow: {
        editDataDrawer: false,
        deleteDataDialog: false
    },
    actionType: 'insertData',
    tableData: [],
    rowData: {},
    pagination: {
        page: 1,
        limit: 20,
        total: 0
    }
});

// 方法集
const $Method = {
    async initData() {}
};

$Method.initData();
</script>

如上代码,是由 yite-cli 脚手架驱动的项目模板中一个 vue 页面的 script 部分。

其中,选项集 注释处的代码,就是修改调试的时候,页面组件显示名称的方法。

picture 1

通过这个代码,咱们调试页面的时候,就能更快地找到页面组件的位置。

至于以上更多的代码,以及为什么有些代码可以直接使用,而不需要导入,这便是 yite-cli 提供的更深层次的能力了,请继续通过本教程学习了解。

何以解忧,唯有代码。不忘初心,方得始终。