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

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

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