解决VUE项目window.open()方法打包部署上线报错404

简介: 解决VUE项目window.open()方法打包部署上线报错404

背景:

我的项目是部署在服务器的指定目录下,并且项目的路由模式是history模式,所以我需要在vue.config中配置publicpath和在路由中配置base,配置为相同的字符串,并告诉后端ng映射到我设置的这个字符串上.,此时访问地址可以显示项目页面,但是部分window.open()方法所跳转到的页面会报错404.

报错代码:
window.open('/XXXX/XXXX', "_blank");

 假设我项目设置的vue.config中配置publicpath和在路由中配置base为:'/ABC/',且后端ng也配置了映射"/ABC/"

 对于我的这种情况,是因为我的window.open使用的是简易写法:

window.open('/XXXX/XXXX', "_blank");

 所以,浏览器会直接新开一个窗口,将我输入的url地址作为绝对地址给打开,这时候,在history模式下,当我使用window.open()方法跳转到非路由路径时,浏览器会尝试从服务器获取该路径的资源,但由于没有匹配到任何路由,服务器会返回404错误。(window.open方法没自动带上'/ABC/',而是直接打开了'/xxxx/xxxx',相当于直接访问根目录,因为我的资源放在'/ABC/目录下',所以是访问不到的)

那为什么我们this.$route.push()不会404?

因为我说了前提条件,我的路由配置了base:'/ABC/',路由跳转会自动强写路由基地址到路径,也就是相当于我们的http请求基地址一样,拼接到请求路径前面,那么this.$router.resolve()方法会自动给我们this.$route.push(‘path’)里面写的path前面加上:'/ABC/',所以这样就可以访问到正确的目录。

那是不是每次window.open手动给他加上前缀"/ABC/"就可以了?

是的,但是这样很麻烦,每次都要手动加,那有没有简易方法?

解决方案:

我们可以通过this.$router.resolve()方法,其与路由配置会进行合并,这样就可将路径与路由的配置相结合.

1.  const { href } = this.$router.resolve({
2.          path: `/XXXX/XXXX`
3.        });
4.     window.open(href, "_blank");

这样this.$router.resolve(),方法会自动将路由中的base给拼接到path前面,我们window.open()路由页面就不会404了.

同时,window.open()方法也可以携带参数:
1.  const { href } = this.$router.resolve({
2.          path: '/XXXX', query: {
3.            appid: this.appid,
4.            modelId: modelId
5.          }
6.        });
7.     window.open(href, '_blank');


相关文章
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
17 2
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
13 4
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
20 3
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
17 3
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
19 3
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物医院系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物医院系统附带文章源码部署视频讲解等
12 2
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的实验室安全考试系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的实验室安全考试系统附带文章源码部署视频讲解等
15 2
|
缓存 资源调度 前端开发
用webpack4带你实现一个vue的打包的项目
一个用webpack4打包的vue 的项目,参照vue-cli的webpack配置,一步一步带你实现一个vue的打包的项目,每一个commit对应一个步骤。
2953 0
|
1天前
|
JavaScript
|
3天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
13 6