Vue Router：直接从浏览器地址栏访问页面

Posted 2023-02-22

【中文标题】Vue Router：直接从浏览器地址栏访问页面

【英文标题】：Vue Router: access page directly from browser address bar

【发布时间】：2019-07-13 14:39:56

【问题描述】：

我正在为我的 Vue.js 应用程序使用 Vue Router 历史模式。我的问题是，当我尝试刷新一个不是根页面的页面，或者在浏览器地址栏中输入它的URL时，显示“找不到页面”404。

现在，在 Vue 路由器指南中，他们对此发出警告（请参阅 https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations），并建议解决方案“向您的服务器添加一个简单的全能后备路由。如果 URL 与任何静态资产不匹配，它应该为您的应用程序所在的 index.html 页面提供服务”。

使用此解决方案，如果我尝试通过浏览器地址栏访问我的一个非根页面（具有相应的 URL），则会显示根页面。这种解释正确吗？

我的问题：有没有办法实现这样的行为，以便我可以从浏览器地址栏直接访问我的不同页面，并在刷新时保持在同一页面上？

【参考方案1】：

如果您使用上述配置。您的后端会将所有请求路由到 index.html。然后当 Vue-Router 挂载时，它会检查 URL 并提供相应的组件。上面的实现将起作用。