JavaScript路由是一種在單頁面應用程序中管理URL的方法。它允許您動態更新頁面內容，并使用由哈希值或HTML5 HistoryAPI 中指定的URL來指向狀態。

一個很好的JavaScript路由庫是React Router，它是針對React庫構建的。它提供了一個簡單的API，讓開發人員可以定義路由，并在URL發生更改時顯示不同的組件。

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, Link, hashHistory } from 'react-router';
const App = ({ children }) => (
<div>
<ul>
<li><Link to="/home">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
<hr />
{children}
</div>
);
const Home = () => (
<div>
<h1>Welcome to the Home Page</h1>
</div>
);
const About = () => (
<div>
<h1>About Us</h1>
<p>We are a small team of developers.</p>
</div>
);
const Contact = () => (
<div>
<h1>Contact Us</h1>
<p>You can reach us at contact@example.com.</p>
</div>
);
ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="about" component={About} />
<Route path="contact" component={Contact} />
</Route>
</Router>
), document.getElementById('root'));

在上面的示例中，我們使用了Link組件來生成我們的導航。每個路由（除主頁外）都在Route組件中定義。主頁由IndexRoute組件定義，這意味著如果沒有其他路由匹配，我們將默認顯示它。

在React Router中還有其他有用的組件和功能，例如帶參數的路由。

const Users = ({ params }) => (
<div>
<h1>User {params.user_id}</h1>
</div>
);
ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="about" component={About} />
<Route path="contact" component={Contact} />
<Route path="users/:user_id" component={Users} />
</Route>
</Router>
), document.getElementById('root'));

在這個示例中，我們定義了一個路徑參數:user_id。在我們的Users組件中，我們可以通過params訪問用戶ID。

另一個非常流行的JavaScript路由庫是Vue Router。與React Router相似，Vue Router提供了一種定義路由，將組件映射到URL的簡單方法。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact }
]
});
const app = new Vue({
router
}).$mount('#app');

在這個示例中，我們在routes數組中定義了我們的路由。每個路由都由一個路徑和一個與之相關的組件組成。我們然后創建一個Vue Router實例，并將其指定為我們的Vue應用程序的一部分。

Vue Router還提供了其他特性，例如路由守衛和動態路由。

總的來說，JavaScript路由使得在單頁面應用程序中，管理URL變得更加容易。React Router和Vue Router這兩個庫，提供了強大而易于使用的API，這使得定義路由和呈現在URL更改時不同的組件非常簡單。