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 实现举例:文章来源:https://www.toymoban.com/news/detail-830280.html
<!-- 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 变化,根据配置的路由规则匹配对应的组件并进行渲染,从而实现页面之间的无刷新切换。两者的具体实现细节有所不同,但整体思路是相似的。文章来源地址https://www.toymoban.com/news/detail-830280.html
到了这里,关于React和Vue 中的 router 实现原理如何的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!