在React和Vue中，我们是如何玩转router的？ - 使用HTML5 History API，React Router利用pushState和replaceState方法在不刷新页面的情况下管理导航历史。它像这样工作： 1. 当URL发生变化时，React Router悄悄地“监听”浏览器地址栏的改动，主要通过popstate事件来察觉url更改。 2. 随着URL的变化，Router会对照预先设定好的JavaScript路由配置对象，依据一套规则找出与当前URL匹配的路径。 3. 一旦找到合适的路线，React Router就会如魔法般地渲染相应的组件到网页上，从而实现了页面内容的实时更新。让我们来看一个React Router实际运用的例子。

// Home.js
const Home = () => <div>Home Page</div>;

// Profile.js
const Profile = () => <div>User Profile Page</div>;

// Messages.js
const Messages = () => <div>Messages Page</div>;



// App.js
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => (
  <Router>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/profile" component={Profile} />
      <Route path="/messages" component={Messages} />
    </Switch>
  </Router>
);



// Navigation.js
import { Link } from 'react-router-dom';

const Navigation = () => (
  <nav>
    <Link to="/">Home</Link>
    <Link to="/profile">Profile</Link>
    <Link to="/messages">Messages</Link>
  </nav>
);

Vue Router 实现原理：