前期,由于没有确定页面展示形式,于是进行了很多探索
- 首先安装element-ui
![](https://img-blog.csdnimg.cn/direct/a189143a816e4823bc01d8dc30f875ba.png)
- 导入elemnt-plus
![](https://img-blog.csdnimg.cn/direct/dd2ce313cbfb4fb2b71c0ab56c07baa3.png)
添加use:
![](https://img-blog.csdnimg.cn/direct/330cd30e71fd4f8ca469c0c726c68a91.png)
- 设置一个全局样式
![](https://img-blog.csdnimg.cn/direct/5f5fbf1ee162433599dc5b327810c2a2.png)
-
编写导航栏
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
background-color="#95d475"
text-color="#606266"
active-text-color="#ffd04b"
mode="horizontal"
@select="handleSelect"
>
职跃助手
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">面试经验总结</el-menu-item>
<el-menu-item index="3" >模拟面试</el-menu-item>
样式如图:
![](https://img-blog.csdnimg.cn/direct/ec3e3a17e61c4d1d83fec434fb838870.png)
- 进行页面间路由
首先在index.js中编写路由逻辑
![](https://img-blog.csdnimg.cn/direct/c480a543569149e380115ef90e7484f4.png)
其次,在导航栏部分编写点击实现跳转页面的逻辑,即在el-menu处加router,并把index设置为相应的页面
![](https://img-blog.csdnimg.cn/direct/25c385c81a5f4d0e801ebadfbca24a03.png)
- 编写面试经验页
首先编写两个选择器用来选择公司岗位,然后进行确认
![](https://img-blog.csdnimg.cn/direct/418bc573595348808adc044f122eea2e.png)
需要注意,为了实现选择一个选项后,在选项框中出现该选项,要把v-model添加到data中:
![](https://img-blog.csdnimg.cn/direct/0f886250947541d2aa92b29186bf5dea.png)
实现效果如下:
![](https://img-blog.csdnimg.cn/direct/4b8e75aa5b0346be8228e1ec44d7822f.png)