企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
### 新建一个页面的流程 一. 在原来的文件夹中添加一个新的页面: 比如在product文件夹下新建一个商品保障服务的页面productGuarantee 1. 首先在views目录下的product文件夹下面新建一个文件夹productGuarantee,再在该文件夹下新建一个index.vue文件 ![](https://img.kancloud.cn/d7/3c/d73cdccac1535705f1456b307ac77405_448x526.png) 2. 然后找到router文件夹下moudles下的product.js文件,在该文件下面加入你新加的页面要跳转的链接和页面地址 ```js { path: 'guarantee', name: 'ProductGuarantee', meta: { title: '保障服务', noCache: true }, component: () => import('@/views/product/productGuarantee/index.vue') } ``` ![](https://img.kancloud.cn/55/83/55834b287afe4c9649110b5402961869_704x352.png) 3. 在浏览器访问:http://localhost:9528/admin/product/guarantee ![](https://img.kancloud.cn/47/4c/474c43c638a384e4e491325e939d689b_730x356.png) 二. 在views下面添加新的文件夹,并添加新的页面,比如现在在views下面添加一个station文件夹 1. 首先在views下新建station文件夹,并在station下新建notice文件夹和Index.vue文件 ![](https://img.kancloud.cn/cd/ff/cdff8432072dc852fcff98c7a8b9e8cf_434x348.png) 2. 然后在router文件夹下的moudles文件夹下新建station.js,声明stationRouter然后导出 ```js import Layout from '@/layout' import { roterPre } from '@/settings' const stationRouter = { path: `${roterPre}/station`, name: 'station', meta: { icon: '', title: '公告列表' }, alwaysShow: true, component: Layout, children: [ { path: 'notice', name: 'stationNotice', meta: { title: '公告列表' }, component: () => import('@/views/station/notice/index') } ] } export default stationRouter ``` ![](https://img.kancloud.cn/d2/11/d2118f5eaf42bd9ada0423edb244c2a3_828x456.png) 3. 在router文件夹下的Index.js中导入 ![](https://img.kancloud.cn/ab/da/abdaee59319d24d07b316f7b5dddef6a_828x488.png) 4. 在页面访问:http://localhost:9528/admin/station/notice ![](https://img.kancloud.cn/fb/32/fb328624f0ddca636d312d25fc5694cc_828x250.png)