js 路由跳转|极客笔记

js 路由跳转

在前端开发中，路由跳转是一个非常常见的操作，它可以实现页面之间的相互切换，更好地管理用户的浏览体验。在现代的前端框架中，路由跳转已经变得非常简单和方便。本文将详细介绍如何使用 JavaScript 实现路由跳转。

什么是路由

在 Web 开发中，路由（Route）是指根据 URL 的不同来加载不同的页面内容或组件。在单页面应用程序（SPA）中，通过路由可以实现页面的切换而不需要重新加载整个页面。通常我们会使用特定的路由库来管理路由，比如 React 中的 react-router。

在传统的多页面应用程序中，每个页面都是一个独立的 HTML 文件，用户在浏览器中跳转页面时会发送一个新的 HTTP 请求，服务器返回对应的 HTML 文件。而在单页面应用程序中，我们只有一个 HTML 文件，当用户跳转页面时只是在这个文件中切换内容而不刷新整个页面。

基本的路由跳转

在不引入任何库的情况下，我们可以使用原生的 JavaScript 实现简单的路由跳转。我们可以通过监听浏览器的地址栏变化来实现不同页面内容的切换。

下面是一个简单的示例：

// HTML
<!-- 创建两个链接 -->
<a href="#home">Home</a>
<a href="#about">About</a>

<div id="content"></div>

// JavaScript
const content = document.getElementById('content');

const renderPage = () => {
  const route = window.location.hash.substr(1);

  if (route === 'home') {
    // 渲染 Home 页面内容
    content.innerHTML = '<h1>Home Page</h1>';
  } else if (route === 'about') {
    // 渲染 About 页面内容
    content.innerHTML = '<h1>About Page</h1>';
  }
}

// 初始渲染
renderPage();

// 监听路由变化
window.addEventListener('hashchange', renderPage);

在上面的示例中，我们使用 window.location.hash 来获取 URL 中的哈希值，然后根据不同的哈希值来渲染不同的页面内容。当链接被点击或者哈希值发生变化时，会触发 hashchange 事件，从而重新渲染页面内容。

这种方式非常简单，但也有一些局限性，比如不能处理复杂的路由逻辑，不能实现参数传递等。

使用第三方库进行路由跳转

为了更方便地管理路由，我们通常会使用第三方库，比如 React 中的 react-router、Vue 中的 vue-router 等。这些库提供了更完善的路由功能，可以实现嵌套路由、动态路由、路由守卫等功能。

React 中使用 react-router

在 React 中，我们可以使用 react-router-dom 库来管理路由。该库提供了 BrowserRouter、Route、Link 等组件，可以方便地实现路由跳转。

下面是一个简单的示例：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;

const App = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  </Router>
);

export default App;

在上面的示例中，我们首先引入所需的组件并定义两个页面组件 Home 和 About，然后创建一个 App 组件，在该组件中使用 Router 组件包裹所有内容，并使用 Link 组件来创建链接，使用 Route 组件来定义不同的路由对应的组件。当用户点击链接时，会根据路由切换对应的页面内容。

Vue 中使用 vue-router

在 Vue 中，我们可以使用 vue-router 来管理路由。vue-router 提供了 VueRouter、router-view、router-link 等组件，可以实现类似的功能。

下面是一个简单的示例：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const Home = { template: '<h1>Home Page</h1>' };
const About = { template: '<h1>About Page</h1>' };

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({ routes });

new Vue({
  router,
  el: '#app'
});

在上面的示例中，我们首先引入所需的组件并定义两个页面组件 Home 和 About，然后定义路由规则 routes，创建一个 router 实例，最后创建一个 Vue 实例并传入 router 对象。在模板中使用 router-view 组件显示当前路由对应的组件，在 router-link 组件中定义不同的路由跳转。