当前位置：首页 > HTML

h5实现登录页面跳转

2026-01-12 16:40:08HTML

实现登录页面跳转的基本方法

使用HTML5和JavaScript实现登录页面跳转，可以通过表单提交或JavaScript事件触发。以下是几种常见方式：

表单提交跳转 在HTML中创建一个表单，通过action属性指定跳转目标页面：

<form action="dashboard.html" method="post">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <button type="submit">登录</button>
</form>

JavaScript跳转 通过监听按钮点击事件，使用window.location.href实现跳转：

<input id="username" type="text" placeholder="用户名">
<input id="password" type="password" placeholder="密码">
<button onclick="login()">登录</button>

<script>
  function login() {
    // 验证逻辑...
    window.location.href = "dashboard.html";
  }
</script>

带参数跳转的实现方式

如果需要传递登录信息，可通过URL参数或本地存储实现：

URL传参

function login() {
  const user = document.getElementById('username').value;
  window.location.href = `dashboard.html?user=${encodeURIComponent(user)}`;
}

使用sessionStorage

function login() {
  const user = document.getElementById('username').value;
  sessionStorage.setItem('currentUser', user);
  window.location.href = 'dashboard.html';
}

防止未授权访问的处理

在目标页面添加验证逻辑，确保跳转后用户已授权：

h5实现登录页面跳转

// dashboard.html中的检查代码
window.onload = function() {
  if (!sessionStorage.getItem('currentUser')) {
    window.location.href = 'login.html';
  }
};

使用现代前端框架的实现示例（Vue为例）

<template>
  <div>
    <input v-model="username" placeholder="用户名">
    <input v-model="password" type="password" placeholder="密码">
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      // 验证逻辑...
      this.$router.push('/dashboard');
    }
  }
}
</script>