从零学习vue之登录页面demo

  • 目标:实现“主页”、“用户登录”、“用户登出”和“用户信息”四个页面,主页根据用户登录情况,展现不同信息,用户信息和登出页面需要用户已经登录的状态。
  • 目的:初步掌握vue、vuex和vue-router,贯通vue单页面应用流程与配置
  • 页面:
  • 首页
  • 用户信息页
  • 登出

1.用户状态管理

采用vuex储存,在每一个mutations中不仅改变用户状态,而且使用sessionStorage存储用户信息
每个分页面通过store的state判断用户是否已登录

2.vue-router

  • 利用导航钩子判断路由元信息是否包含登录验证
  • 动态路由匹配

3.ajax

可采用vue-resourse或axios

总结

总结起来,其实用到的东西并不多,但是一开始写还是很多没有思路,慢慢有思路,对照官方文档就好。
遇到的问题:vuex用到module,因此在往state里添加信息的时候注意要先索引module的名称

不足之处

每个页面用的公共header,本想放置到app.vue中去,但是登录了以后发现虽然store的state变化了,但是header虽然依据了state状态,但并未发生改变,尝试多种写法无效后,把每个页面都添加了header组件,这样跳转的时候header状态自然发生了变化。

具体参见项目地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容