Homework: 产品注册页面开发

剧情背景

青叶决定利用空闲时间开发一个简单的在线产品注册系统。她的目标是让用户能够在进入主页后通过点击 “立即注册” 按钮跳转到一个注册页面，并在该页面填写必要的个人信息。为了保证用户输入的信息是有效的，她还决定为表单输入框添加验证功能。如果用户的输入不符合要求，相关的输入框会变成红色，提示用户进行修正。

这次作业将帮助你巩固 Vue 数据绑定 和 路由 的基本操作，同时练习 表单验证 的实现方法。

开发要求

你将实现一个简单的产品注册页面，包含两个主要的组件：

1. 主页（Home.vue）

   • 页面中央有一个按钮，按钮的文字为 “立即注册”。
   • 点击按钮后，页面跳转至 注册页面（Register.vue）。

2. 注册页面（Register.vue）

   • 页面包含三个输入框：手机号、用户名和密码。

   • 每个输入框都有验证规则：

     • 手机号：必须是一个有效的手机号码，格式为 11 ​ 位数字。
     • 用户名：至少 3 个字符，最多 15 个字符，可以包含字母和数字。
     • 密码：至少 6 个字符，且包含字母和数字的组合。

   • 输入框使用 v-bind 动态绑定样式，当输入不符合要求时，该输入框的边框变为红色。

   • 如果所有输入都有效，点击注册按钮后，页面应显示 “注册成功” 的提示。

   • 使用路由来实现从主页到注册页面的跳转。

开发步骤

1. 创建 Home.vue ​ 组件，展示一个 立即注册 按钮，点击按钮后跳转到 /register ​ 页面。
2. 创建 Register.vue ​ 组件，包含三个输入框（手机号、用户名、密码），并进行验证。
3. 使用 Vue 的 数据绑定 来实现样式的动态变更（如：输入不合法时，边框变红）。
4. 配置路由，使得从主页跳转到注册页时能够加载相应的组件。

注意事项

• 使用 Vue Router 来实现页面间的跳转。
• 在 Register.vue 组件中，添加表单输入验证逻辑。如果用户输入不符合要求，输入框边框变红。
• 验证规则请自行实现，并显示相关提示信息。

思考题

1. 安全性思考： 假设你开发的注册页面是一个真实的用户登录系统，用户在未登录状态下，若直接在地址栏输入 /user ​（或任何他不该访问的页面路径），你将如何防止或者提示该用户？ 请列举几种方法，包括但不限于路由守卫、页面重定向等。