Vue Router两种路由模式

lonelydawn

发布于 2021-09-26 11:33:49

4170

发布于 2021-09-26 11:33:49

修改页面 hash（锚点）可以实现修改 URL 而不重新加载页面

window.location = '#home'

监听页面 hash 变化，当 hash 改变时，动态切换视图

window.onhashchange = function () {
    // 根据hash切换视图
}

使用 window.history.pushState 和 window.history.replaceState 也可以使用修改 URL 而不重新加载页面

function changeRoute () {
    window.history.pushState(state, title, url) // 新建一条history记录
    // do sth 切换视图
}

window.history.replaceState(state, title, url) // 使用新history记录代替当前记录

当浏览器前进、后退，或者在JS中使用back()、forward()、go()等改变当前所在history记录时会触发popstate事件

window.onpopstate = function () {
    // 根据URL切换视图
}

页面 URL 改变后，用户刷新页面，会向服务器请求当前 URL，因此服务端需要配置对应的路由。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度