返回

手写简易Vue-router

前端

前言

在上一篇文章中，我们介绍了前端路由的原理和解析过程。在本文中，我们将通过手写一个简版的Vue-router来体会一下Vue是如何处理路由跳转时无刷新更新页面的，并来了解一下Vue-router的核心原理。

什么是Vue-router？

Vue-router是一个轻量级的JavaScript路由库，它允许我们轻松地构建单页面应用程序(SPA)。SPA是指那些使用单一的HTML页面来呈现不同视图的应用程序。当用户在SPA中导航时，页面不会刷新，而是会更新视图来反映新的URL。

Vue-router是如何工作的？

Vue-router通过监听URL的变化来工作。当用户点击一个链接或在地址栏中输入一个新的URL时，Vue-router就会根据新的URL更新视图。Vue-router有两种模式：Hash模式和History模式。

  • Hash模式：在Hash模式下，Vue-router使用URL的哈希部分来表示不同的视图。例如，如果当前URL是http://example.com/#/home，那么Vue-router就会渲染Home视图。
  • History模式：在History模式下，Vue-router使用URL的路径部分来表示不同的视图。例如，如果当前URL是http://example.com/home，那么Vue-router就会渲染Home视图。

手写简易Vue-router

现在，我们来手写一个简易的Vue-router，以便更好地理解Vue-router是如何工作的。

首先，我们需要创建一个名为Router的类。这个类将负责监听URL的变化并更新视图。

class Router {
  constructor() {
    this.routes = []
    this.currentUrl = ''

    // 监听URL的变化
    window.addEventListener('hashchange', this.onHashChange.bind(this))
  }

  // 添加路由
  addRoute(path, component) {
    this.routes.push({ path, component })
  }

  // 更新视图
  updateView() {
    const currentUrl = window.location.hash.slice(1) || '/'
    this.currentUrl = currentUrl

    const route = this.routes.find(route => route.path === currentUrl)
    if (route) {
      const component = route.component
      const el = document.getElementById('app')
      el.innerHTML = component
    }
  }

  // 当URL发生变化时调用
  onHashChange() {
    this.updateView()
  }
}

接下来，我们需要创建一个名为app.js的文件，并在其中使用我们的Router类。

import Router from './router.js'

const router = new Router()

// 添加路由
router.addRoute('/', 'Home')
router.addRoute('/about', 'About')

// 更新视图
router.updateView()

最后，我们需要创建一个名为index.html的文件，并在其中包含app.js文件。

<!DOCTYPE html>
<html>
  <head>
    
    <script src="app.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

现在，我们可以运行我们的应用程序，然后点击链接或在地址栏中输入不同的URL来测试它。当URL发生变化时，应用程序的视图将更新，而页面不会刷新。

总结

通过手写一个简易的Vue-router，我们了解了Vue-router是如何工作的，以及它的核心原理。希望这篇文章能对您有所帮助。