hash和history的区别

一、hash和history的区别

vue-router 中hash模式和history模式。

mode:"hash";  
// mode:"history";

hash

hash原理：hash通过监听浏览器的onhashchange()事件变化，查找对应的路由规则

	1.地址中永远带着#号，不美观
	2.若以后将地址通过第三方手机分享,若app校验严格，则地址会被标记为不合法
	3.兼容性好

history

history原理： 利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化

	1.地址干净,美观
	2.兼容性和hash模式相比略差
	3.应用部署上线时，后端人员支持，解决刷新页面服务端404的问题

解决路由导航到统一路径重复报错的问题

import VueRouter from "vue-router";
//解决路由导航到统一路径重复报错的问题
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err);
};
Vue.use(VueRouter);