vue.js - 单页应用程序路由

标签 vue.js browser url-routing single-page-application vue-router

现代单页应用程序使用路由机制,不必依赖片段或其他 url 参数,而只需利用 url 路径。浏览器如何知道何时向服务器请求资源以及何时向单页应用程序请求由路由器控制的 spa 页面?是否有一个浏览器 API 可以接管 url 处理的控制,然后由例如接管。 vue-router 或其他路由 spa 库?

最佳答案

在 Vue Router 中(我假设其他库/框架是相同的)这是通过 HTML5 history API(pushState()replaceState()popstate)实现的,它允许您操纵浏览器的历史记录,但不会导致浏览器重新加载页面或查找资源,从而使 UI 与 URL 保持同步。

例如,当你在浏览器的控制台中输入这个命令时,观察地址栏会发生什么

history.pushState({urlPath:'/some/page/on/stackoverflow'},"",'/some/page/on/stackoverflow')

新 URL 甚至会添加到浏览器的历史记录中,因此如果您离开该页面并返回该页面,您将被定向到新 URL。

当然,所有这些 URL 在服务器上都不存在。因此,为了避免当用户尝试直接访问不存在的资源时出现 404 错误的问题,您必须添加一个后备路由,该路由重定向到您的应用程序所在的 index.html 页面。

Vue Router's HTML5 History Mode

React Router's <BrowserRouter>

关于vue.js - 单页应用程序路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52578247/

相关文章:

javascript - TypeScript 和 this 关键字(SharePoint 框架和 Vue)

php - 返回按钮跳页

excel - VBA 代码打开不需要的浏览器窗口

javascript - 如何使参数化 Express 路由在带或不带尾部反斜杠的情况下工作?

javascript - Vue.js - 当 'copying it' 到另一个数据属性时不要绑定(bind)对象

javascript - 将值从组件 data() 传递到其他文件

internet-explorer - 如何最好地说服人们升级 IE?

javascript - 如何使用reactjs和react-router实现正确的布局

firefox - 主干导航在 Firefox 中触发两次

javascript - Jquery 附加到标签