Question

我想在Laravel中使用vue-router从vuejs中的URL中删除哈希（＃）。所以我使用了mode:'history'或history: true

const router = new VueRouter({
    routes: routes,
    mode: 'history'
    //history: true
});

，它工作正常，但问题是每次将请求从example.com/home更改为example.com/user时，请求都会发送到服务器，并且所有页面都会刷新，但是我只想更改页面顶部和底部之间的内容。因此，当我在顶部菜单中标记字符串时，在转到另一个URL时它不会被取消标记，但是现在它发送服务器，并且当不使用mode:'hash'时，页面将完全加载。

如何在不向服务器发送其他请求的情况下删除哈希，以免再次完全加载页面并仅加载正文部分？

谢谢

Answer 1

我还没有创建链接，但是我只是在url中手动更改了链接。如果您说不能手动操作，那么为什么要使用以下模式：“哈希”？因此，如果我认为Router-link可以正常工作，我应该使用它。我不知道

好吧...我明白了

如果您使用的是历史记录模式，则必须使用<route-link>，因为如上所述，

在HTML5历史记录模式下，router-link将拦截click事件，以便浏览器不会尝试重新加载页面。

输入新的URL时，浏览器将加载该页面，这是浏览器的操作方式，您将无法解决。但是，该框架通过更新url和内容，而不是实际上重定向（重新加载）

，以不同的方式处理它

之所以使用hashbang，是因为broser将#字符之后的所有内容都视为页内导航。意味着它不将其视为重定向。传统上，HTML中使用井号字符来导航到页面中的项目。

例如，about-us.html#contact将用户重定向到“关于”页面并滚动到联系表单。

现代js框架通过不重定向而不使用重定向操作，并使用哈希后的内容来传递路由，从而使用哈希来破坏此导航。

例如，如果您使用localhost:8080/#/about-us之类的路由，则localhost:8080/#部分与localhost:8080/index.html#相同，因此在#字符后进行任何更改都会使浏览器保持打开状态同一页面，而javascript（Vue路由器）则可以处理所需的所有更改。

希望这可以清除它。首先，我没有在任何项目中使用历史记录模式。

vuejs-如何在Laravel中使用vue-router从URL中删除哈希，而无需再次请求服务器？

1 个答案: