Frontend Routing: Core Principles, Implementation, and Source Code Analysis

In recent years, component‑based front‑end stacks such as React and Vue have become the dominant technologies for building single‑page web applications (SPA). Front‑end routing, analogous to doors between rooms in a house, is essential for navigating between views without full page reloads.

The article first reviews the evolution of routing from back‑end‑only URL mapping, through the transition period, to modern front‑end routing. Early back‑end routing rendered complete HTML on the server, while modern SPAs rely on the browser to render views based on JavaScript.

Core principles are explained: a router maps URLs to UI components, and two main presentation modes exist—hash routing (URL contains # ) and history routing (clean URLs using the HTML5 History API). Both modes detect URL changes and update the view without refreshing the page.

Hash routing works by listening to the window.onhashchange event; changing the hash does not trigger a server request. History routing uses history.pushState() and history.replaceState() to modify the URL and the browser’s history stack, while window.onpopstate listens for back/forward navigation.

Implementation examples are provided:

Vue router setup:

import VueRouter from 'vue-router'
const routes = [{ path: '/', name: 'home', component: Home, meta: { title: '首页' } }]
const router = new VueRouter({ mode: 'history', routes })
Vue.use(VueRouter)

React router‑dom setup:

import { BrowserRouter as Router, Route } from 'react-router-dom';
class App extends Component {
  render() {
    return (
);
  }
}

Nested routes are demonstrated for both frameworks. Vue uses a children array in the route definition:

const router = new Router({
  mode: 'history',
  routes: [{
    path: '/nest', name: 'nest', component: Nest,
    children: [{ path: 'first', name: 'first', component: NestFirst }]
  }]
});

React defines full paths for child routes:

const Route = () => (
);
class Nest extends Component {
  render() {
    return (
一级路由
);
  }
}

Navigation guards are covered for Vue (global, per‑route, and component guards such as beforeRouteEnter ) and the historical React equivalents ( onEnter , onLeave ) that were removed after version 4.0.

The article concludes that while the underlying mechanisms of front‑end routing remain stable, developers must choose the appropriate mode and guard strategy based on business requirements, SEO considerations, and browser compatibility.