新增页面
首先在 @/router/index.js
中增加你需要添加的路由。
如:新增一个 excel 页面
TIP
仅仅这样不会有任何效果的,它只是创建了一个基于layout
的一级路由,你还需要在它下面的 children
中添加子路由。
这样侧边栏就会出现如图所示的 menu-item
了
TIP
由于 children
下面只声明了一个路由所以不会有展开箭头,如果children
下面的路由个数大于 1 就会有展开箭头,如下面所示。 如果你想忽视这个自动判断可以使用 ,这样它就会忽略之前定义的规则,一直显示根路由。详情见
侧边栏就会出现如图所示的 submenu
了
如果你的路由是多级目录,如本项目 @/views/nested 那样, 有三级路由嵌套的情况下,不要忘记还要手动在二级目录的根文件下添加一个 <router-view>
。
新增完路由之后不要忘记在 @/views
文件下 创建对应的文件夹,一般一个路由对应一个文件,该模块下的功能组件或者方法就建议在本文件夹下创建一个utils
或components
文件夹,各个功能模块维护自己的或components
组件。如:
最后在 文件夹下创建本模块对应的 api 服务。
个人写 vue 项目的习惯,在全局的 @/components
只会写一些全局的组件,如富文本,各种搜索组件,封装的日期组件等等能被公用的组件。每个页面或者模块特定的业务组件则会写在当前 views 下面。如:@/views/article/components/xxx.vue
。这样拆分大大减轻了维护成本。
页面的样式和组件是一个道理,全局的 @/style
放置一下全局公用的样式,每一个页面的样式就写在当前 views
下面,请记住加上scoped
或者命名空间,避免造成全局的样式污染。