当前位置：首页 > 文章列表 > 文章 > 前端 > 纯JS实现SPA路由，避免重复代码的终极攻略

纯JS实现SPA路由，避免重复代码的终极攻略

2025-03-13 10:36:51 0浏览收藏

本文提供了一个纯JavaScript实现单页面应用路由的终极指南，无需Angular或Vue等框架。通过巧妙运用vue-router（无需Vue.js框架的其他部分）和jQuery.ajax（或$.load()），开发者可以动态加载页面内容，避免在多个页面中重复编写代码，显著提升开发效率。教程涵盖路由定义、路由实例创建、路由守卫以及动态加载页面内容等关键步骤，并附带详细代码示例和注意事项，帮助开发者快速构建简洁高效的单页面应用路由系统。适合学习前端路由机制及提升JavaScript开发技能的读者。

使用纯JavaScript构建单页应用路由，避免代码冗余

本文介绍如何在不依赖Angular或Vue等框架的情况下，仅使用JavaScript实现单页面应用的路由功能，从而避免在多个页面中重复编写代码。假设您有一个包含多个菜单项的网页，每个菜单项对应一个不同的页面内容。为了简化开发，我们需要一种方法动态加载页面内容，而不是为每个菜单创建单独的HTML文件。

如何用纯JavaScript实现单页面应用的路由功能，避免重复编写代码？

我们将利用vue-router和jQuery.ajax (或$.load() )来实现这一目标。虽然vue-router通常与Vue.js框架一起使用，但它本身与Vue.js解耦，可以独立使用其路由功能。我们使用vue-router管理路由，并结合jQuery.ajax或$.load()动态加载页面内容。

实现步骤：

引入必要的库文件： 引入jQuery、Vue.js核心文件（即使不使用Vue.js框架的其他组件，也需要引入核心文件以避免vue-router报错）和vue-router。
定义路由： 使用vue-router定义路由规则，每个路由对应一个页面。路由规则需指定页面的路径和对应的HTML片段或URL。
创建路由实例： 创建一个vue-router实例，并将定义的路由规则传递给它。将mode设置为'history'，以便使用HTML5 History API管理URL。
路由守卫（可选）： 使用beforeEach导航守卫，在路由切换前执行一些操作，例如清空内容容器，显示加载动画等。
动态加载页面内容： 在路由守卫或路由切换后，使用jQuery.ajax或$.load()方法将对应页面的内容加载到指定的容器中。 $.load()方法较为简单，直接加载HTML片段；$.ajax方法则允许更精细的控制，例如处理加载错误。

示例代码：

主页面HTML (index.html):

<div>
  <a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq6yhaaJjIairtyzoo55jJWzeHKUkrfPaZKqeaiwZHqesqOjZH-NoaSy3cqigayF0bKLfpaR3c92' rel='nofollow'>切换到页面 A</a>
  <a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq6yhaaJooairtyzoo55jJWzeHKUkrfPaZKqeaiwZHqesqOjZH-NoaSy3cqigayF0bKLfpaR3c92' rel='nofollow'>切换到页面 B</a>
</div>
<div id="route-view"></div>

<script src="jquery.js"></script><script src="vue.js"></script><script src="vue-router.js"></script><script>
  // ... (路由配置和路由守卫代码，见下文) ...
</script>

路由配置和守卫代码 (script.js):

const routes = [
  { path: '/a', component: { template: '<div>我是页面 A</div>' } },
  { path: '/b', component: { template: '<div>我是页面 B</div>' } },
];

const router = new VueRouter({
  mode: 'history',
  routes,
});

router.beforeEach((to, from, next) => {
  $('#route-view').empty(); // 清空容器
  next();
});

new Vue({
  router,
  el: '#app',
}).$mount('#app');

注意： 此示例中，页面内容直接内嵌在路由组件的template属性中。在实际应用中，您可以使用$.ajax或$.load()从外部HTML文件加载内容。记住处理加载错误和加载动画等细节，以提升用户体验。此外，History模式需要后端服务器的支持才能正常工作。

虽然这种方法可以实现基本的路由功能，但与成熟的路由框架相比，在功能性和易用性上存在差异。对于大型项目或复杂路由需求，建议使用专业的路由框架。

今天关于《纯JS实现SPA路由，避免重复代码的终极攻略》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！