js 点击跳转网页代码怎么写

另一种常见的方法是使用<a>标签的href属性。通过 JavaScript 修改<a>标签的href属性，可以实现动态跳转。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function setLink(url) {
            document.getElementById('dynamicLink').href = url;
        }
    </script>
</head>
<body>
    <a id="dynamicLink" href="#">Click to go to a page</a>
    <button onclick="setLink('https://www.example.com')">Set Link to Example</button>
</body>
</html>

在这个示例中，点击按钮会将<a>标签的href属性设置为https://www.example.com，然后用户可以点击链接进行跳转。

三、使用 form 表单提交

还可以通过提交表单来实现页面跳转，这种方法适用于需要提交数据的场景。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form id="myForm" action="https://www.example.com" method="GET">
        <button type="submit">Go to Example</button>
    </form>
</body>
</html>

在这个示例中，当用户点击按钮时，表单会提交到https://www.example.com，实现页面跳转。

四、使用 JavaScript 的 location.assign 和 location.replace 方法

除了使用window.location.href，还可以使用location.assign和location.replace方法。这两个方法也可以实现页面跳转，但它们有一些细微的区别。

location.assign

location.assign与window.location.href类似，它们都会在浏览器历史记录中添加一个新的记录。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function redirectTo(url) {
            location.assign(url);
        }
    </script>
</head>
<body>
    <button onclick="redirectTo('https://www.example.com')">Click to go to Example</button>
</body>
</html>

location.replace

location.replace则不会在浏览器历史记录中添加新的记录。这意味着用户无法使用浏览器的“后退”按钮返回到之前的页面。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function redirectTo(url) {
            location.replace(url);
        }
    </script>
</head>
<body>
    <button onclick="redirectTo('https://www.example.com')">Click to go to Example</button>
</body>
</html>

五、在框架或库中使用页面跳转

在现代的前端开发中，很多时候会使用框架或库来管理页面跳转。例如，使用React、Vue等框架时，页面跳转通常通过路由来实现。

React 中的跳转

在React中，可以使用React Router来实现页面跳转。

import React from 'react';

import { BrowserRouter as Router, Route, Link, useHistory } from 'react-router-dom';
function App() {
  let history = useHistory();
  function handleClick() {
    history.push("/newpage");
  }
  return (
    <div>
      <button onClick={handleClick}>Go to New Page</button>
      <Route path="/newpage" component={NewPage} />
    </div>
  );
}
function NewPage() {
  return <h2>New Page</h2>;
}
export default function Root() {
  return (
    <Router>
      <App />
    </Router>
  );
}

Vue 中的跳转

在Vue中，可以使用Vue Router来实现页面跳转。

<template>

  <div>
    <button @click="goToNewPage">Go to New Page</button>
  </div>
</template>
<script>
export default {
  methods: {
    goToNewPage() {
      this.$router.push('/newpage');
    }
  }
}
</script>