1. 首页导航点击跳转逻辑

最近在做一个PC端官网，梳理下首页导航点击跳转逻辑，希望能给有需要的小伙伴们一些参考。

1. 首页导航菜单导航菜单这里有一个 点击出现白底，再点击一次白底隐藏功能，实现逻辑如下：
   2.1，我们需要给相关导航菜单绑上 v-on click 事件；
   2.2，在css里把动态点击后出现白色的样式写好；
   2.3，使用 动态 :class 属性来绑定；
   2.4，在data中定义好动态属性，默认情况为：false；
   2.5，在methods中完成点击白底取反逻辑。

   
   image.png
   image.png
   image.png
   image.png
   

   截止到这里，这个功能就实现了。

2. 下一步当我们点击导航菜单时，实现跳转到登录面页，这里将用到 vue-router。具体需求：
   a) 首页点击登录/注册时，跳转进来后默认显示的是账户登录/注册账户页面；
   b) 点击账户登录时，注册账户隐藏，点击注册账户时，账户登录隐藏；
   c) 点击账户登录页面中的注册时，跳转到注册账户页面；
   d) 点击账户登录页面中的忘记密码时，账户登录和注册账户隐藏，忘记密码显示；

先附上最终实现的效果图

image.png

逻辑如下：
a) 需求
3.1，我采用的是element-ui组件来搭建布局，element-ui组件有提供很多丰富的组件；
3.2，在router中的index.js中配置好导航菜单栏上的登录/注册router；

image.png
image.png

3.3，在首页index.vue文件中把router添加进来；

image.png
3.4，在login.vue文件中的data中，把账户登录设置为默认显示，这样点击进来后显示的就是账户登录了。
image.png
image.png

b) 需求
3.1，element-ui组件已提供账户登录和注册账户来回切换功能，并且也绑定了点击事件；
3.2，我们只需要在账户登录和注册账户上绑定v-show指令即可；

image.png
3.3，在methods中编写相关逻辑，这里的tab.name.first是账户登录，tab.name.second是注册账户，就实现效果了。
image.png

c) 需求
3.1，给注册绑定一个click事件；
3.2，当注册等于注册账户时，账户登录隐藏，注册账户显示，这样就实现效果了。

image.png

d) 需求
3.1，完成忘记密码页面布局，忘记密码页面包含在账户登录和注册账户同一个大的div中；

image.png

3.2，给忘记密码绑定一个click事件；
3.3，给忘记密码最外层div和账户登录和注册账户最外层的div绑定v-show指令；

image.png
3.4，因为忘记密码默认是隐藏的，在没有点击忘记密码前，默认显示的还是账户登录页面。ifForget在data中的初始值为：true，如果初始值给false的话，那么点击进来默认的页面就是修改密码页面了，这和需求有出入而且也不符合逻辑。当你在v-show指令处取反操作时，那么账户登录和注册账户就隐藏了，然后实现效果。
image.png
image.png

到这里，从首页导航点击菜单跳转的所有需求就都实现了~~~