Vue.js前端框架项目实战（微课版）教案-任务书 任务2.2 开发个人中心页面.docx

任务2.2开发个人中心页面

通过优化“HTML版技术社区网站”的首页和个人中心页面，掌握条件渲染指令的灵活运用，实现复杂页面逻辑和动态内容展示。具体任务要求如下。

1．完善首页登录功能

实现首页头部的登录状态检测与跳转逻辑，实现以下逻辑：在未登录状态下，显示“登录”按钮，如图2-17所示，在单击“登录”后跳转至登录页面；在已登录状态下，显示用户头像和用户名，如图2-18所示，在单击用户头像或用户名后跳转至个人中心页面。

图2-17未登录状态

图2-18已登录状态

2．开发个人中心页面

复制首页头部至个人中心页面，并设置为用户已登录状态。

实现左侧菜单栏，包含个人主页、个人资料、账号