136 lines
5.2 KiB
HTML
136 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>登录跳转测试</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Microsoft YaHei', sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
.test-case {
|
|
border: 1px solid #ddd;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
border-radius: 5px;
|
|
}
|
|
.success { border-color: #4CAF50; background-color: #f1f8e9; }
|
|
.error { border-color: #f44336; background-color: #ffebee; }
|
|
.info { border-color: #2196F3; background-color: #e3f2fd; }
|
|
button {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
button:hover {
|
|
background-color: #45a049;
|
|
}
|
|
.url-display {
|
|
background-color: #f5f5f5;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
font-family: monospace;
|
|
word-break: break-all;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>登录跳转测试页面</h1>
|
|
|
|
<div class="test-case info">
|
|
<h3>当前页面信息</h3>
|
|
<p><strong>当前URL:</strong> <span class="url-display" id="currentUrl"></span></p>
|
|
<p><strong>Base URL:</strong> <span class="url-display" id="baseUrl"></span></p>
|
|
<p><strong>应用路径:</strong> <span class="url-display" id="appPath"></span></p>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>测试场景</h3>
|
|
<p>这个页面用于测试登录成功后的跳转逻辑是否正确。</p>
|
|
|
|
<h4>测试步骤：</h4>
|
|
<ol>
|
|
<li>点击下面的按钮模拟不同的跳转场景</li>
|
|
<li>观察浏览器地址栏的变化</li>
|
|
<li>确认跳转是否正确到达 <code>/emotion-museum/</code> 路径下</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>跳转测试</h3>
|
|
|
|
<button onclick="testRedirect('/')">测试跳转到根路径 (/)</button>
|
|
<button onclick="testRedirect('/chat')">测试跳转到聊天页面 (/chat)</button>
|
|
<button onclick="testRedirect('/diary')">测试跳转到日记页面 (/diary)</button>
|
|
|
|
<h4>使用 window.location.href (旧方式 - 会出错):</h4>
|
|
<button onclick="testWindowLocation('/')">window.location.href = '/'</button>
|
|
<button onclick="testWindowLocation('/chat')">window.location.href = '/chat'</button>
|
|
|
|
<h4>使用相对路径 (正确方式):</h4>
|
|
<button onclick="testRelativePath('.')">跳转到当前目录</button>
|
|
<button onclick="testRelativePath('chat')">跳转到 chat (相对路径)</button>
|
|
</div>
|
|
|
|
<div class="test-case">
|
|
<h3>测试结果</h3>
|
|
<div id="testResults"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// 显示当前页面信息
|
|
document.getElementById('currentUrl').textContent = window.location.href;
|
|
document.getElementById('baseUrl').textContent = window.location.origin;
|
|
document.getElementById('appPath').textContent = '/emotion-museum/';
|
|
|
|
function logResult(message, type = 'info') {
|
|
const resultsDiv = document.getElementById('testResults');
|
|
const resultItem = document.createElement('div');
|
|
resultItem.className = `test-case ${type}`;
|
|
resultItem.innerHTML = `<p><strong>${new Date().toLocaleTimeString()}:</strong> ${message}</p>`;
|
|
resultsDiv.appendChild(resultItem);
|
|
}
|
|
|
|
function testRedirect(path) {
|
|
logResult(`测试 Vue Router 跳转到: ${path}`, 'info');
|
|
|
|
// 模拟 Vue Router 的行为
|
|
const baseUrl = '/emotion-museum';
|
|
const fullPath = baseUrl + path;
|
|
|
|
logResult(`计算出的完整路径: ${fullPath}`, 'success');
|
|
|
|
// 实际跳转（注释掉避免真的跳转）
|
|
// window.location.href = fullPath;
|
|
|
|
logResult(`如果使用 router.push('${path}')，会正确跳转到: ${window.location.origin}${fullPath}`, 'success');
|
|
}
|
|
|
|
function testWindowLocation(path) {
|
|
logResult(`测试 window.location.href 跳转到: ${path}`, 'info');
|
|
logResult(`这会跳转到: ${window.location.origin}${path}`, 'error');
|
|
logResult(`❌ 错误：这会跳转到根目录，而不是 /emotion-museum/ 下`, 'error');
|
|
}
|
|
|
|
function testRelativePath(path) {
|
|
logResult(`测试相对路径跳转到: ${path}`, 'info');
|
|
const currentPath = window.location.pathname;
|
|
const newPath = currentPath.replace(/\/[^\/]*$/, '/') + path;
|
|
logResult(`会跳转到: ${window.location.origin}${newPath}`, 'success');
|
|
}
|
|
|
|
// 初始化日志
|
|
logResult('页面加载完成，可以开始测试', 'success');
|
|
logResult(`当前在 ${window.location.pathname} 路径下`, 'info');
|
|
</script>
|
|
</body>
|
|
</html>
|