当前位置：首页 > news >正文

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

news 来源：原创 2024/5/9 7:35:53

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