js不刷新页面,改变url

loadpage的时候有对URL Parameter的判断

浏览器窗口有一个history对象,用来保存浏览历史。

检查浏览器是否支持
if (window.history){
// 支持History API
} else {
// 不支持
}

history对象提供了一系列方法,允许在浏览历史之间移动。

其中包括
history.back();
history.forward();
history.go(0)//刷新当前页面;

HTML5为history对象添加了两个新方法,history.pushState()和history.replaceState(),用来在浏览历史中添加和修改记录。

都会改变浏览器标签栏中的URL值,区别在于pushState()会将之前的地址记录在history对象中,通过back()可以返回前一页,replaceState()则不能返回
我用到的是history.replaceState()

接收三个参数

var shortURL=top.location.href.substring(0,top.location.href.indexOf('?'));
history.replaceState(null,null,shortURL)

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue的路由切换页面不刷新是由于Vue采用了单页应用(Single Page Application, SPA)的开发模式。单页应用是指只有一个HTML页面的应用,通过动态的改变页面的内容来实现不同的页面展示效果,而不是每次刷新整个页面。 在传统的多页应用中,每次页面切换都会发起一个新的http请求,然后服务器返回一个完整的HTML页面,页面刷新就是浏览器通过加载新的HTML页面来实现的。 而在Vue的单页应用中,浏览器在加载页面时会先加载一个index.html文件,然后通过使用Vue的路由机制,在不刷新页面的情况下改变URL路径,并借助Vue的内部机制来动态更新页面内容。这意味着整个页面只有一个HTML文件,所有的数据交互和页面变化都通过JavaScript来完成。 因此,当Vue的路由切换时,页面不刷新的原因是因为只是改变URL路径,并没有重新加载整个页面。Vue使用了虚拟DOM(Virtual DOM)的概念,在切换路由时,通过监测数据的改变,重新构建虚拟DOM,并与原始的虚拟DOM进行插入、删除、更新等操作,从而只更新需要变化的部分,提高了页面的性能和体验。 这样的设计模式可以带来许多好处,如减少网络请求、提高页面加载速度、提升用户体验等。但也需要注意,在一些特殊情况下,比如页面切换后需要重新加载数据,我们需要手动控制页面的刷新。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值