Homework: 产品注册页面开发

剧情背景

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

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

开发要求

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

主页（Home.vue）
- 页面中央有一个按钮，按钮的文字为“立即注册”。
- 点击按钮后，页面跳转至注册页面（Register.vue）。
注册页面（Register.vue）
- 页面包含三个输入框：手机号、用户名和密码。
- 每个输入框都有验证规则：
  - 手机号：必须是一个有效的手机号码，格式为 11 位数字。
  - 用户名：至少 3 个字符，最多 15 个字符，可以包含字母和数字。
  - 密码：至少 6 个字符，且包含字母和数字的组合。
- 输入框使用 v-bind 动态绑定样式，当输入不符合要求时，该输入框的边框变为红色。
- 如果所有输入都有效，点击注册按钮后，页面应显示“注册成功”的提示。
- 使用路由来实现从主页到注册页面的跳转。

开发步骤

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

注意事项

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

思考题

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