Vue項目路由組件在地址欄轉跳和組件內刷新出問題的坑

我在寫項目前端的時候，三次遇到一個相似的坑...

 

新建組件並配置了路由。

可以 this.$router.push("/xxx")轉跳到組件

但是在地址欄直接輸入/xxx，進行轉跳則是Not Found或者this is a params Tets!

 

之后我查了一下大概是這個原因

https://blog.csdn.net/xjlinme/article/details/74783887

https://blog.csdn.net/Bs__Q/article/details/83180931

 

總結：

　　問題原因：1、路由為history 模式下，如果直接通過地址欄訪問路徑，會出現404錯誤，其實是因為調用了history.pushState API 所以所有的跳轉之類的操作都是通過router來實現的，

　　　　　　　　　【所以我之前可以 this.$router.push("/xxx")轉跳到組件】

　　　　　　　　     這篇文章給出的解決方法是：只需要在后台配置，如果URL匹配不到任何靜態資源，就跳轉到默認的index.html。

　　

　　我覺得該方法不怎么好用，於是我想到一個方法，在前端配置路由守衛，如果轉跳到xxx路徑，則調用守衛的next()進行轉跳。

　　而這next()應該，約等於history.pushState API，所以可以正常轉跳了

　　router.beforeEach((to, from, next) => {

　　　　if(to.path == "/xxx"){

　　　　　　next()

　　　　}

　　})

 

 　　！！！（此方法在開發環境下有效，但是打包上線后在地址欄輸入地址，會報錯：this is a params Tets）！！！

　　

　　報錯原因在於，vue做的是單頁面應用。

　　在地址欄輸入地址，在服務端靜態服務器里根本找不到其他路徑的靜態文件。

　　誒又是回到原點了，最后還是要用上面那篇文章給出的方法即：非index.html的請求，都轉跳到indexhtml。

　　我服務端用的koa2，所以使用

　　koa2-connect-history-api-fallback