amani_2022 2016-08-26 08:22 采纳率: 0%
浏览 1248
已结题

关于PAJAX、pushState、单页模式

现在网上说的pushState+AJAX ，比如现在做一个管理页面,左边菜单、右边内容

 <div id="menu"></div>
<div id="main"></div>

点击左边菜单通过AJAX请求a.html得到HTML填充到右边,地址栏URL，history发生
变化了(这个a.html是不带menu菜单的),但是如果我直接访问a.html的话那menu不
就没了吗?
那是不是我要实现这个,就要做两个a.html ·一个带menu，一个不带menu？

通过pushState+ajax可以把第二个页面加载到内容区域``改变了url地址··，但是一
刷新就马上编程没有menu的页面了·

  • 写回答

2条回答 默认 最新

  • lishihong108 2016-08-26 08:46
    关注

    不用做两个a.html，单页模式就是最后做成一个页面的，用户访问其他页面，都调到主页面上的，做个拦截

    评论

报告相同问题？

  • 详解从Vue-router到html5的pushState
    2020-10-18 08:36
    Vue-router 的 HTML5 History 模式就是基于 pushState() 和 replaceState() 的。它能够在不刷新页面的情况下改变URL，实现前端的路由控制。开发者在使用时，可以通过 vue-router 的编程式导航来实现控制，如使用 ...
  • pushState实现Ajax无刷新页面切换
    2020-10-21 02:20
    - 单页应用（SPA）中，可以使用pushState来更新地址栏并记录不同的视图状态，然后配合popstate事件来处理视图的切换。 - 对于那些需要前进、后退功能的传统多页应用，pushState和popstate可以用来在不重新加载整个...
  • history.pushState详解[项目代码]
    2025-11-20 10:53
    history.pushState是HTML5提供的一个强大API，可以用来在单页应用中管理路由，实现无刷新交互，是现代Web开发中不可或缺的一部分。开发者在使用这个API时，应当注意上述各方面问题，以确保应用的可用性和可维护性。
  • 简单聊聊H5的pushState与replaceState的用法
    2020-12-14 04:39
    总结来说，`pushState()`和`replaceState()`提供了对浏览器历史记录的高级控制，使得单页应用能够实现更流畅的用户体验，同时`popstate`事件则帮助我们在用户导航时更新页面内容。这两个方法的正确使用对于构建现代...
  • History：pushState() 方法
    2024-03-28 10:47
    Debug_info的博客 在HTML文档中，方法向浏览器的会话历史栈增加了一个条目。该方法是异步的。为 popstate 事件增加监听器，以确定导航何时完成。state 参数将在其中可用。
  • 使用history.pushState管理浏览历史
    2024-06-28 17:19
    省赚客APP开发者@聚娃科技的博客 它允许我们改变当前页面的URL和浏览历史条目而不刷新页面，从而实现单页应用（SPA）中的页面切换和前进后退功能。大家好，我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷...
  • vue-router-h5-history:vue-router的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
    2021-05-17 01:03
    vue-routerHTML5 History 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 const router = new VueRouter({ mode: 'history', routes: [...] }) 当你使用 history 模式时，URL...
  • 无刷新跳转—关于history中pushState和replaceState方法详解
    2022-03-02 03:33
    AIGC镜像空间的博客 **关于history中pushState和replaceState方法详解，**常码字不易，出精品更难，没有特别幸运，那么请先特别努力，别因为懒惰而失败，还矫情地将原因归于自己倒霉。你必须特别努力，才能显得毫不费力。如果这篇文章能...
  • 利用history.pushState实现前端路由
    2017-09-23 16:09
    shidaping的博客 link1 link2 var view = document.getElementById('router-view'); function linkTo(link){ switch(link) { case 1: { window.history.pushState({a:1}, 'mylink1
  • 【js/css】pushState和popState简明教程
    2021-09-16 09:46
    当白的博客 pushState和replaceState h5中提供了只修改地址栏、不修改页面内容的api: pushState(添加浏览历史), replaceState(修改当前浏览历史)， popState事件在用户返回或前进进会被出发触发 history.pushState方法接受三...
  • 没有解决我的问题, 去提问