React和Vue 中的 router 实现原理如何

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 实现举例

javascript 复制代码

// 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模式的特点：
  1. 兼容性好
  2. hash变化会在浏览器的history中增加一条记录，可以实现浏览器的前进和后退功能。
1. Hash模式的缺点：由于会在后边加一个#，影响美观。
History模式
- History模式是基于html5的history对象。
- 通过location.pathname获取到当前url的路由地址；
- history模式下，通过pushState和replaceState方法改变浏览器地址栏的URL，同时不刷新页面，当URL发生变化时，浏览器会触发popstate事件，然后Vue监听该事件进行相应的路由切换，Vue路由会根据URL匹配路由配置，找到对应的组件进行渲染。
- History模式特点：
  1. 方便
  2. 可读性强
  3. 更加美观
1. History模式缺点：用户刷新或直接输入地址会向服务器发送请求；需要服务器端支持。
实现步骤：
1. 安装并使用插件
2. 创建router实例
3. 在根组件上添加实例
4. 添加路由视图
5. 导航使用router-link
router-view 组件与路由渲染
1. 通过Vue.observable在router实例上创建一个保存当前路由的监控对象current。
2. 当浏览器地址发生变化时，修改监控对象current
3. 在router-view组件中监听监控对象current的变化，当current变化后，获取用户注册的相应component，并利用h函数将component渲染成vnodes，进而更新页面视图。
Router-link 组件与路由跳转
- Router-link组件通过参数to设置目标路由，tag参数负责组件在页面上渲染的标签，默认为a标签，replace参数则负责控制在路由跳转时是否使用replace方法。

Vue Router 实现举例：

javascript 复制代码

<!-- 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>

javascript 复制代码

// 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 }
  ]
});

javascript 复制代码

<!-- 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 变化，根据配置的路由规则匹配对应的组件并进行渲染，从而实现页面之间的无刷新切换。两者的具体实现细节有所不同，但整体思路是相似的。