从单页面应用角度去解决不跳转页面,也能更改浏览器url地址

正常来说不刷新页面,也能更改浏览器url地址的方法有很多,我们在网上搜的话可以看到有pushState、replaceState、popstate等方法,那还有没有其他方法呢?
答案是有的!
最近做一个vue商城项目的时候,用户点击支付时,用户可复制当前链接(加上登录态),粘贴到第三方浏览器之后,完成整个支付闭环。话不多说,直接贴代码:

let url = window.location.href;
  let index = url.indexOf("?");
  if (index != -1) {
    window.location.href = url.substring(0, index);
  }
  window.location.href += `?_t=${_state.user.token}`;

有些人看到上面的代码,会有些疑问, window.location.href不是会使页面跳转了吗?当初我也是这么认为,后面我在网上搜了,才知道这个原因:
从单页面应用角度去解决不跳转页面,也能更改浏览器url地址_第1张图片
从单页面应用角度去解决不跳转页面,也能更改浏览器url地址_第2张图片

以上意思是,总体的意思就是假如浏览器url后面带有#, 使用window.location.href, 是无法跳转的,这个刚好是vue的单页面应用的一个特性!,所以利用这个特性,就可以实现不刷新页面,也能更改浏览器url地址

你可能感兴趣的:(vue,业务场景,javascript,前端,vue.js)