事务打卡之登录注册页面编写

项目地址

消除#

在使用vue-router的时候发现url地址中需要加上/#/，这样不太美观和不方便

我们可以在路由配置中设置mode属性为history就可以去掉#

登录/注册页面

最终效果图


这里用的部分vant的form表单组件和自定义样式来编写样式，vant组件大部分可以加上自定义类名来进行二次样式编辑，个人用起来还是比较方便的，有兴趣的童鞋可以去看他的文档vant官网由于样式不是很复杂，这里就不叙述了，有兴趣的童鞋可以去看我的github，这里涉及到的还是路由的跳转，也就是登录，注册，忘记密码等页面的跳转。

路由跳转

router-link

<!-- 根据name来跳转 -->
<router-link :to="{name: 'home'}" />
<!-- 根据path来跳转 -->
<router-link :to="{path: '/home'}" />

this.$router.push

this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

这里不做过多的叙述，有机会在专门写一篇关于router的内容

优化

实际写完发现，其实两个页面的框架，所用到的组件，样式，逻辑都是比较相近的，后期可以考虑用模板来优化和简化结构。

遇到的问题

全局引入vant包后，在页面内使用到vant的Toast组件的时候，发现需要单独在页面内引入Toast，否则使用Toast的方法会报错


然后查了一下，其实全局安装并非是创建全局变量，只能是在作用域下去使用，发现其实是在引用的时候不能直接使用Toast的方法，需要用this.$toast()

若有错误之处，多谢指出，还请见谅。