vue 專案只要不是靜態頁面，一般都會和官方的路由管理器 vue-router 一起使用。

最近專案有一個需求，是在位址列輸入路由，跳轉到對應路由元件，在開發環境中這樣做是可以跳轉的，但是專案打包後，通過位址列跳轉會報錯。

因為 vue 在頁面上顯示哪個元件是根據 vue-router 進行控制的，在位址列上直接輸入路由名稱，並不能觸發 vue-router 的規則，所以只能通過監聽地址的改變，利用回撥函式在元件內部進行動態修改路由。

方式一：history 模式

vue-router 預設是 hash 模式，通過更改模式為 history 模式可以解決這個問題，但是這需要後端配合，更改服務端配置，雖然過程稍麻煩但也是一個辦法，有興趣的朋友可以檢視往期文章

方式二：hashchange 事件

什麼是 hash？

hash 就是 URL 地址中 # 字元後面的字串。

更改它不會導致整個頁面重新載入，而且可以定位到元素 id 或 name 與之相同的位置（錨點）。

window.location.hash 可以獲取到 hash。比如 localhost:8080/#/abcde 的 location.hash="#/abcde"。

通過監聽 hash 的狀態，來動態修改 vue-router 的路由，是頁面進行元件切換，這樣就不會導致頁面報錯或 404 了。

當 hash 被修改時，將觸發 hashchange 事件（IE8 +支援）：

window.addEventListener('hashchange',function(e) {
	console.log(e.oldURL); 
	console.log(e.newURL)
},false);

所以在 App.vue 中新增此事件：

mounted(){
	window.addEventListener('hashchange',()=>{
		var currentPath = window.location.hash.slice(1); // 獲取輸入的路由
		if
 
(this.$router.path !== currentPath){
			this.$router.push(currentPath); // 動態跳轉
		}
	},false);
}

這樣即可解決，在位址列輸入路由跳轉無效問題。