使用 vue router 实现 history 路由
问题中描述了使用 History 路由进行页面切换的需求，无需在每个页面重复编写公共代码。这里提供了一种利用 Vue Router 和 jQuery 的解决方案：
我是公共部分// 定义路由配置 const routes = [ { name: 'PageA', path: '/a', meta: { template: '/subpages/page-a.html', }, }, { name: 'PageB', path: '/b', meta: { template: '/subpages/page-b.html', }, }, ]; // 创建 Vue 路由实例 const router = new VueRouter({ mode: 'history', routes: routes }); // 导航守卫，用于在切换路由时加载页面内容 router.beforeEach(function (to, from, next) { // 移除旧页面 $('#route-view').empty(); // 加载新页面 $('#route-view').load(to.meta.template); next(true); }); // 将路由实例挂载到全局，便于子页面使用 window.$router = router; // 点击按钮切换路由 $('#menuA').on('click', function() { $router.push({ name: 'PageA' }) }); $('#menuB').on('click', function() { $router.push({ name: 'PageB' }) });
登录后复制
子页面代码：
我是页面 A我是页面 B
登录后复制
使用方法：
确保服务器配置正确，支持 History 模式。在页面中包含上述 HTML 和 JavaScript 代码。根据需要创建子页面并放置在 /subpages 目录中。
通过这种方式，可以实现 History 路由，在切换页面时动态加载子页面的内容，并避免重复编写公共代码。
立即学习“前端免费学习笔记（深入）”；
以上就是如何使用 Vue Router 和 jQuery 实现 History 路由，避免页面切换时重复加载公共代码？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2809210.html
