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

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

配置了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文件,然后保存。


欢迎分享,转载请注明来源:夏雨云

原文地址:https://www.xiayuyun.com/zonghe/680506.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-07-30
下一篇2023-07-30

发表评论

登录后才能评论

评论列表(0条)

    保存