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

这篇具有很好参考价值的文章主要介绍了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 变化,根据配置的路由规则匹配对应的组件并进行渲染,从而实现页面之间的无刷新切换。两者的具体实现细节有所不同,但整体思路是相似的。文章来源地址https://www.toymoban.com/news/detail-830280.html

到了这里,关于React和Vue 中的 router 实现原理如何的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 一文了解 history 和 react-router 的实现原理

    我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。 本文作者:霜序 在前一篇文章中,我们详细的说了 react-router@3.x 升级到 @6.x 需要注意的问题以及变更的使用方式。 react-router 版本更新

    2024年02月12日
    浏览(41)
  • 比较react和vue的响应式原理

    React 和 Vue 都使用虚拟 DOM 来提高性能,但在响应式原理和状态管理方面有一些不同。React 更注重单向数据流和手动状态管理,而 Vue 强调响应式数据绑定和自动状态追踪,使开发更加便捷。 React的响应式原理: 虚拟 DOM和单向数据流 :React 使用虚拟 DOM(Virtual DOM)来管理和渲

    2024年02月07日
    浏览(94)
  • vue2、vue3、react响应式原理、组件声明周期阐述与对比

    响应式原理: Vue.js 的响应式原理是通过使用 Object.defineProperty 函数来实现的。在 Vue.js 中,当一个对象被传入 Vue 实例的 data 选项中时,Vue.js 会将这个对象的属性转换为 getter 和 setter,以便在属性被访问或修改时能够触发相应的更新。 具体来说,Vue.js 会在实例化过程中递归

    2024年02月06日
    浏览(53)
  • vue3图片懒加载借助插件vue3-lazy react中的图片懒加载 借助插件 react-lazyload

    vue2 就用 vue-lazyload 这个喽 安装 npm install vue3-lazy 在main.ts中配置 在页面中使用 1, 下载安装懒加载模块 2, 在src/assets/目录下放入懒加载占位图 placeholder.gif 3, 在需要使用懒加载的组件中导入懒加载模块和占位图 4, 在组件rander函数中创建占位图片标签img 5, 在组件模板中给需要懒

    2024年02月11日
    浏览(46)
  • 新项目如何选择vue和react

    vue 和 react 的区别 Vue 和 React 都是流行的前端框架,它们有以下不同点: 语法和模板:Vue 使用类似于 HTML 的模板语法,而 React 使用 JSX 语法,在 JavaScript 中嵌入 HTML 标记。 组件化:Vue 和 React 都采用了组件化的思想,但是 Vue 的组件化更加彻底,一个 Vue 组件包括了 HTML 模板

    2024年02月02日
    浏览(62)
  • React Router 中的路由导航方法:push() 和 replace() 详解

    在 React Router 中, this.props.history.push() 和 this.props.history.replace() 是用于编程式导航的两个常用方法。它们允许我们在组件中动态地更改路由,并可选地传递状态参数。本文将介绍这两个方法的用法和区别。 push() 方法将在导航时创建一个新的历史记录条目,并将用户重定向到新

    2024年03月15日
    浏览(47)
  • 探索前端跨组件通信:EventBus在Vue和React中的应用

    本文作者系360奇舞团前端开发工程师 事件总线(Event Bus) 是一种用于组件间通信的模式,通常用于解决组件之间的解耦和简化通信的问题。在前端框架中,如 Vue.js,事件总线是一个常见的概念。基本上,事件总线是一个能够触发和监听事件的机制,使得组件能够在不直接依

    2024年02月02日
    浏览(70)
  • 管道在Vue和Angular中的作用及React的替代方案

    本文主要讲解管道在Vue和Angular中有哪些作用以及React对于管道概念的替代方案是什么。 计算机中的Pipline(管道)常被认为起源于Unix,最初Mcllroy发现很多时候人们会将shell命令的输出传递给另一个shell命令,类似于管道。所以就提出了管道的概念。并在1973年实现了这个管道概

    2024年02月04日
    浏览(47)
  • taro react/vue h5 中的上传input onchange 值得区别

    1、taro3+react 2、taro3+vue3

    2024年02月11日
    浏览(36)
  • 前端基础积累_新技术_Vue_React_H5_奇怪的BUG_面试_招聘

    前几天在博客园收到了一封来自出版社的消息,说看到原来很久之前写的 VueJS 源码分析的文章 希望能够联系他们出版社去写书。这样的事情虽然在博客园是会经常发生的,但是这也让我意识到了,多多写高质量的文章能够给 coder 带来很多的 所谓的好处,不管是短期的技术积

    2024年02月13日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包