Vue.js中跳转报错 地址栏改变 页面不改变

配置了vue-router前端路由，会直接载入.vue组件，组件内ready()部分从服务器拉数据。已经正确加载页面，尝试修改url最后一个参数（数字），希望按回车键后加载新的内容。发现要按2次回车才能正常请求。

前端路由格式为/newspost/:postid,地址栏现在为:

http://localhost:8080/#!/newspost/2

将2换成3,然后按回车：

http://localhost:8080/#!/newspost/3

则页面没有变化，chrome开f12的network发现并没有发起请求。再次到地址栏按回车（不修改数字参数),则发起请求并加载内容。如果第二次也修改了url参数，那么回车后依然不发起请求。

在部署vue项目时，部署完成发现请求地址返回两个ip地址，主要原因是前端打包的时没写http导致会把服务器的ip地址添加到请求的api中

VUE_APP_API='192.168.1.195:8098'

正确写法

VUE_APP_API='http://192.168.1.195:8098'

刚开始学vue框架，公司要求项目打包的时候把服务器的ip地址单独留一个接口，方便后期商家可以自行配置自己的服务器地址。

解决办法：

1、新建一个js文件用于保存服务器的ip地址，将当前ip存入window对象，内容如下：

2、在webpack配置文件中找到plugins选项，配置插件：

3、在index.html文件中以script标签形式引入server.js(保存ip)文件，注意在打包的时候开发环境和生产环境的路径问题：

4、在main.js中将ip添加到vue原型中：Vue.prototype.ip = window.ip

5、最后在需要调用 的地方直接使用this.ip即可。

6、打包之后的目录结构，如果服务器的ip地址发生了变化，可直接修改server.js文件，然后保存。

---