需求是去掉首页地址栏 /#及后面的内容 ,只保留 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里面移除监听事件。