js 实现路由
实现路由的基本方法
在 JavaScript 中实现路由通常涉及监听 URL 变化，并根据 URL 路径渲染不同的内容。以下是几种常见的方法：
基于 window.location 和 history API
监听 URL 变化可以通过 popstate 事件或手动解析 window.location 实现。history.pushState 和 history.replaceState 可以修改 URL 而不触发页面刷新。
window.addEventListener('popstate', () => {
const path = window.location.pathname;
renderContent(path);
});
function navigateTo(path) {
history.pushState({}, '', path);
renderContent(path);
}
function renderContent(path) {
const root = document.getElementById('root');
root.innerHTML = path === '/home' ? '<h1>Home</h1>' : '<h1>404</h1>';
}基于 hash 路由
hash 路由通过监听 hashchange 事件实现，适用于不支持 history API 的旧浏览器。
window.addEventListener('hashchange', () => {
const hash = window.location.hash.substr(1);
renderContent(hash);
});
function navigateTo(path) {
window.location.hash = path;
}
function renderContent(path) {
const root = document.getElementById('root');
root.innerHTML = path === 'home' ? '<h1>Home</h1>' : '<h1>404</h1>';
}使用第三方库
React Router
在 React 中，可以使用 react-router-dom 实现路由功能。
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<Link to="/home">Home</Link>
<Route path="/home" component={Home} />
</Router>
);
}
function Home() {
return <h1>Home</h1>;
}Vue Router
在 Vue 中，可以通过 vue-router 实现路由。
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{ path: '/home', component: Home }
];
const router = new VueRouter({ routes });
new Vue({
router,
template: '<router-view></router-view>'
}).$mount('#app');动态路由匹配
动态路由允许根据参数渲染不同内容，例如用户 ID 或产品名称。
React Router 动态路由
<Route path="/user/:id" component={User} />
function User({ match }) {
return <h1>User ID: {match.params.id}</h1>;
}Vue Router 动态路由
const routes = [
{ path: '/user/:id', component: User }
];
function User() {
return <h1>User ID: {{ $route.params.id }}</h1>;
}路由守卫
路由守卫用于在导航前后执行逻辑，例如权限验证或数据加载。
React Router 守卫
通过高阶组件或 useEffect 实现。
function PrivateRoute({ component: Component, ...rest }) {
const isAuthenticated = checkAuth();
return (
<Route
{...rest}
render={props =>
isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
}
/>
);
}Vue Router 守卫
通过 beforeEach 钩子实现。
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});嵌套路由
嵌套路由允许在父路由下定义子路由。
React Router 嵌套路由
<Route path="/dashboard" component={Dashboard}>
<Route path="/dashboard/profile" component={Profile} />
</Route>Vue Router 嵌套路由
const routes = [
{
path: '/dashboard',
component: Dashboard,
children: [
{ path: 'profile', component: Profile }
]
}
];以上方法涵盖了从原生 JavaScript 到主流框架的路由实现，可以根据项目需求选择适合的方案。
