使用纯JavaScript构建单页应用路由，避免代码冗余
本文介绍如何在不依赖angular或vue等框架的情况下，仅使用javascript实现单页面应用的路由功能，从而避免在多个页面中重复编写代码。 假设您有一个包含多个菜单项的网页，每个菜单项对应一个不同的页面内容。为了简化开发，我们需要一种方法动态加载页面内容，而不是为每个菜单创建单独的html文件。
我们将利用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。立即学习“Java免费学习笔记（深入）”；
-
定义路由： 使用
vue-router定义路由规则，每个路由对应一个页面。 路由规则需指定页面的路径和对应的HTML片段或URL。 -
创建路由实例： 创建一个
vue-router实例，并将定义的路由规则传递给它。 将mode设置为'history'，以便使用HTML5 History API管理URL。
vue-composition-api-best-practices下载Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
-
路由守卫（可选）： 使用
beforeEach导航守卫，在路由切换前执行一些操作，例如清空内容容器，显示加载动画等。 -
动态加载页面内容： 在路由守卫或路由切换后，使用
jQuery.ajax或$.load()方法将对应页面的内容加载到指定的容器中。$.load()方法较为简单，直接加载HTML片段；$.ajax方法则允许更精细的控制，例如处理加载错误。
示例代码：
主页面HTML (index.html):
<div> <a href="https://www.php.cn/link/5670721a44da5f1e001fd7b662c1dfe9">切换到页面 A</a> <a href="https://www.php.cn/link/c68df1093a93023d0960841f27224080">切换到页面 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模式需要后端服务器的支持才能正常工作。
虽然这种方法可以实现基本的路由功能，但与成熟的路由框架相比，在功能性和易用性上存在差异。 对于大型项目或复杂路由需求，建议使用专业的路由框架。
