VUE跳转到其他页面404

问题遇到的现象和发生背景

VUE路由设置后，主页能进，但是跳转到其他页面就404了？

问题相关代码，请勿粘贴截图

这是我的路由设置

img


这是我在主页的跳转代码

img

运行结果及报错内容

使用PYCHARM运行时，HOME页面可以成功跳转到TEXTCOMPARE页面，但是使用NGINX运行起来后，外部访问时，从HOME跳转到TEXTCOMPARE页面就404了，感觉是不是路由设置错了还是哪里没设置对。

我的解答思路和尝试过的方法
我想要达到的结果

nginx配置路由转发了吗

把window. open改成
this.$router.push('/TextCompore')

history模式下，需要在nginx配置 try_files
如：

location /vueprodpath {
    try_files $uri $uri/ /vueprodpath/index.html;
}

可参考我新写的一篇文章，各种前端项目nginx的配置 https://blog.csdn.net/hl_qianduan/article/details/125700720

先看看你在项目中的config文件中有没有配置转发 proxy ,如果配了的话，在你的nginx中也要配置

img

类似下面这种：

server {
    listen       80;
    server_name  serveryuyun.heyunhui.top;

    location / {
            proxy_pass http://127.0.0.1:8082;
    }
}

可能是nginx设置了代理请求了，你把window.open方法中的路径换成百度的链接试试，如果可以访问说明你的写法有问题，如果不能访问可能就是Nginx代理造成的

因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404
nginx配置：


location /{
    root  /website/wenfu_zszk/;
    index index.html;
 
    #解决404
    try_files $uri $uri/ /index.html;
  }

可以使用路由this.$router.push，window.open要输入全地址跳转的

vue是单元面 所以路由配置 分为hash模式 history模式 hash 跳转有#号很丑 hisstory看起来 好看些 但nginx 需要配置一下见官网:

https://router.vuejs.org/zh/guide/essentials/history-mode.html#apache

img