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

 

總結：

　　問題緣由：一、路由爲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