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