React 和 Vue 中的路由器（Router）实现原理类似，都是基于监听 URL 变化，然后根据不同的 URL 加载相应的组件或页面。下面是它们的一般实现原理：
React Router 实现原理：
-
History API： React Router 使用 HTML5 History API（pushState() 和 replaceState() 方法）来操作浏览器的历史记录，从而实现无刷新页面的路由切换。
-
监听 URL 变化： React Router 会监听浏览器 URL 的变化，一般通过 popstate 事件来监听 URL 的改变。
-
路由匹配：当 URL 变化时，React Router 会根据路由配置文件（通常是一个 JavaScript 对象）匹配对应的路由规则，找到需要渲染的组件。
-
组件渲染： 匹配到对应的路由后，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 实现原理：
-
Vue Router 实例化： 在 Vue 应用中，通过实例化 Vue Router 来创建路由器，一般会在根组件中使用 Vue Router。
-
监听 URL 变化：Vue Router 使用浏览器的 hashchange 事件或者 HTML5 History API 来监听 URL 变化。
-
路由匹配：当 URL 变化时，Vue Router 会根据路由配置文件中定义的路由规则，匹配到对应的路由。
-
组件渲染：匹配到对应的路由后，Vue Router 会渲染对应的组件到页面上，实现页面的更新。
共同点：
-
声明式路由配置： React Router 和 Vue Router 都支持声明式的路由配置，即通过配置文件（或者组件注解）来定义路由规则，使得路由配置更加清晰和易于维护。
-
组件式路由导航：React Router 和 Vue Router 都支持通过组件来实现路由导航，例如 组件（React Router）和 组件（Vue Router）。
-
Hash模式
-
hash模式是vue-router的默认路由模式，它的标志是在域名之后带有一个#
-
可以通过window.location.hash获取到当前url的hash；
-
hash模式下，当URL中的哈希值发生变化时，浏览器会触发hashchange事件，Vue监听这个事件进行路由切换，Vue路由会根据URL中的哈希值匹配路由配置，找到相应组件进行渲染。
-
Hash模式的特点：
-
兼容性好
-
hash变化会在浏览器的history中增加一条记录，可以实现浏览器的前进和后退功能。
-
-
Hash模式的缺点：由于会在后边加一个#，影响美观。
-
-
History模式
-
History模式是基于html5的history对象。
-
通过location.pathname获取到当前url的路由地址；
-
history模式下，通过pushState和replaceState方法改变浏览器地址栏的URL，同时不刷新页面，当URL发生变化时，浏览器会触发popstate事件，然后Vue监听该事件进行相应的路由切换，Vue路由会根据URL匹配路由配置，找到对应的组件进行渲染。
-
History模式特点：
-
方便
-
可读性强
-
更加美观
-
-
History模式缺点：用户刷新或直接输入地址会向服务器发送请求；需要服务器端支持。
-
-
实现步骤：
-
安装并使用插件
-
创建router实例
-
在根组件上添加实例
-
添加路由视图
-
导航 使用router-link
-
-
router-view 组件与路由渲染
-
通过Vue.observable在router实例上创建一个保存当前路由的监控对象current。
-
当浏览器地址发生变化时，修改监控对象current
-
在router-view组件中监听监控对象current的变化，当current变化后，获取用户注册的相应component，并利用h函数将component渲染成vnodes，进而更新页面视图。
-
-
Router-link 组件与路由跳转
-
Router-link组件通过参数to设置目标路由，tag参数负责组件在页面上渲染的标签，默认为a标签，replace参数则负责控制在路由跳转时是否使用replace方法。
-
Vue Router 实现举例：
<!-- Home.vue -->
<template><div>Home Page</div>
</template><script>
export default {// component definition
};
</script><!-- Profile.vue -->
<template><div>User Profile Page</div>
</template><script>
export default {// component definition
};
</script><!-- Messages.vue -->
<template><div>Messages Page</div>
</template><script>
export default {// component definition
};
</script>
// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Profile from './views/Profile.vue';
import Messages from './views/Messages.vue';Vue.use(Router);export default new Router({routes: [{ path: '/', component: Home },{ path: '/profile', component: Profile },{ path: '/messages', component: Messages }]
});
<!-- Navigation.vue -->
<template><nav><router-link to="/">Home</router-link><router-link to="/profile">Profile</router-link><router-link to="/messages">Messages</router-link></nav>
</template><script>
export default {// component definition
};
</script>
总的来说，React Router 和 Vue Router 的实现原理都是基于监听 URL 变化，根据配置的路由规则匹配对应的组件并进行渲染，从而实现页面之间的无刷新切换。两者的具体实现细节有所不同，但整体思路是相似的。
