JavaScript去掉首页地址栏后面的/#及后面的内容,不刷新页面,,,回退两次问题

需求是去掉首页地址栏 /#及后面的内容 ,只保留 http://xxxxx.com为了美观

方法一

就是vue的路由模式改为history,不过这样就会有问题,要配置找不到路路径时候的页面。

方法二
    var title = '';
    var newUrl = '/';
    history.pushState(stateObject,title,newUrl);

	//History 对象 pushState() 这个方法有3个参数,你可以从上面的例子看到。
	
	//第一个参数,是一个Json对象,在储存有关当前URl的任意历史信息。
	//第二个参数,title 就相当于传递一个文档的标题;
	//第三个参数是用来传递新的URL. 你将看到浏览器的地址栏发生变化而当前页面并没刷新。

上面这个方法就可以去掉内容,并且也是使用的hash模式

第二个方法还可以用来改变地址栏的参数,且不刷新.

补更:这个pushstate到后面,测试还是有一点问题,虽然他没有刷新,但是它始终在栈里面增加了一条记录,所以从这个页面跳到其它页面,再按浏览器的后退需要按两次才能回来,这个问题我在网上找了一会资料,大概了解了一下解决方法,就是,监听浏览器按钮的回退事件,当用户点击回退的时候,根据hash值,判断用户是否是往这个页面回退,如果是,就手动再帮用户,回退一次~~

代码:

  // 监听浏览器的返回按钮事件
  
 window.addEventListener("popstate", function(e) {  
            if(window.location.hash == ' '){
            history.go(-1)
            // console.log(window.location.hash);
        }})

在destroyed里面移除监听事件。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值