history api fallback for vue-router

app.js

// usage

import historyFallback from 'lib/polyfill/historyFallback'
import historySupport from 'lib/support/history';

let redirected = historyFallback('/', historySupport ? 'history' : 'hash');

if (!redirected) {
//   You app ...
//   Vue.use(VueRouter);
//   const router = new VueRouter({});
} else {
  // do nothing, wait the page to redirect to the correct url.
  // do not bootstrap your app if `redirected` is true.
}

history.js

// lib/support/history.js

let support = false;

if (window.history && window.history.pushState) {
	support = true;
}

export default support;

historyFallback.js

/**
 * historyFallback
 * Some browsers does not support html5 history api,
 * so we need redirect the url.
 */


/**
 * @param {String} base - base url.
 * @param {String} mode - vue-router mode.
 * If browser support history api, the mode is 'history',
 * else it is 'hash'.
 */
export default function (base = '/', mode) {
	let location = window.location;
	let url = null;

	let pathname = location.pathname;
	let host = location.host;

	// be carefull here.
	if (pathname === base && mode === 'hash') {
		// url is hash mode
		return false;
	} else if (pathname === base && mode !== 'hash') {
		// url is hash, but the app is not in hash mode,
		// we need convert url to history mode.
		url = location.protocol + "//" + host + getPathFromHash(location.hash) +
			location.search;
		window.location.href = url;
		return true;
	} else if (pathname !== base && mode !== 'hash') {
		// url is hisotry mode, ok.
		return false;
	}

	// else, url is history mode and mode is hash

	url = location.protocol + "//" + host + `/${location.search}#` + pathname;
	window.location.href = url;

	return true;
}

function getPathFromHash(hash) {
	let str = hash.split('#');
	if (str.length === 1) {
		return hash;
	}

	str.shift();

	str = str.join('#');
	if (str[0] !== "/") {
		return "/" + str;
	}

	return str;
}