Vue3刷新页面报错404的解决方法

2024-07-28 17:51:08

vue-router历史模式

最近在学习Vue3的过程中遇到了一个问题，那就是在写代码的过程中，每当代码发生了变动，页面一刷新，原先的页面就会变成这个样子：

打开控制台一看：

这时候刷新、在浏览器地址栏直接输入地址也不管用。每次写一点代码，都不能及时看到结果，需要从8080重新进入才可以，其中的崩溃可想而知。此时判断应该是路由跳转的问题，于是来到router.js文件看一看：

import {
  createRouter,
  createWebHistory
} from 'vue-router'
// import Home from '../views/Home.vue'

const Home = () => import('../views/home/Home');
const Category = () => import('../views/category/Category');
const Detail = () => import('../views/detail/Detail');
const Profile = () => import('../views/profile/Profile');
const Shopcart = () => import('../views/shopcart/Shopcart');

const routes = [{
    path: '/home',
    name: 'Home',
    component: Home,
    meta: {
      title: '图书兄弟'
    }
  },
  {
    path: '/',
    name: 'Default',
    component: Home,
    meta: {
      title: '图书兄弟'
    }
  },
  {
    path: '/category',
    name: 'Category',
    component: Category,
    meta: {
      title: '商品分类'
    }
  },
  {
    path: '/detail',
    name: 'Detail',
    component: Detail,
    meta: {
      title: '商品详情'
    }
  },

  {
    path: '/profile',
    name: 'Profile',
    component: Profile,
    meta: {
      title: '个人中心'
    }
  },
  {
    path: '/shopcart',
    name: 'Shopcart',
    component: Shopcart,
    meta: {
      title: '购物车'
    }
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {

  // 如果没有登录，到login
  next();
  document.title = to.meta.title;
})

export default router

感觉没啥问题，仔细检查了自己写的代码部分，没有发现问题，于是更纳闷了，难道是自动生成的代码出现了问题？经过一翻排查，发现原来是vue-router历史模式的问题： vue3中历史模式默认改为了HTML5模式：createWebHistory()

当使用这种历史模式时，URL 会看起来很 "正常"，例如 https://example.com/user/id。不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。 这就是一直折磨我的罪魁祸首！

Vue-router官方给出的解决方案是：

要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。

这涉及到服务器的配置，由于我的项目还在开发阶段，所以这种解决方式暂时不能用。所幸还有其他的解决方案，那就是将历史模式由当前的HTML5模式改为Hash模式：

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

表现在代码上就是两个createWebHistory换成了createWebHashHistory，这样就完成了修改。

修改完成后重新启动项目：

npm run serve

此时刷新页面也不会报404了，大功告成！

详细解决方法请移步vue-router官网“不同的历史记录模式”部分： router.vuejs.org/zh/guide/essentials/history-mode.html

到此这篇关于Vue3刷新页面报错404的解决方法的文章就介绍到这了,更多相关Vue3刷新页面报错404内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案

遇到的问题使用webpack打包vue后,将打包好的文件,发布到Tomcat上,访问成功,但是刷新后页面报404错. 在网上查找了一下,原来是HTML5 History 模式引发的问题,具体为什么,vue官方已经给出了解释,你可以看https://router.vuejs.org/zh-cn/essentials/history-mode.html 但是看完问题又来了,官方给出的解决方案中没有说tomcat下,怎么决解. 解决方案根据官方给出的解决方案原理你要在服务端增加一个覆盖所有情况的
解决vue router使用 history 模式刷新后404问题

因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是真实存在的路径,所以刷新就会返回404错误. 想要history模式正常访问,还需要后台配置支持.要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面. 也就是在服务端修改404错误页面的配置路
vue框架下部署上线后刷新报404问题的解决方案(推荐)

<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> nginx配置 location / { try_files $uri $uri/
vue下history模式刷新后404错误解决方法

本文介绍了vue下history模式刷新后404错误解决方法,分享给大家,具体如下: 官方说明文档: https://router.vuejs.org/zh/guide/essentials/history-mode.html 一. 实测 Linux 系统 Apache 配置: 更改站点配置文件即可,我这里在 Directory 标签后面添加了官方给的五行配置 <VirtualHost *:80> #Created by linvic on 2018-05-24 Serveradmin 674
解决vue打包项目后刷新404的问题

vue打包项目后刷新404的问题Nginx配置 server { listen 80; server_name localhost; index index.html; root /root/dist; location / { root /root/dist; try_files $uri $uri/ /index.html =404; } } 以上这篇解决vue打包项目后刷新404的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vu
Vue实现远程获取路由与页面刷新导致404错误的解决

一.背景先简单介绍一下现在项目情况:前后端分离,后端服务是Java写的,前端是Vue+ElementUI. 最近的一个需求是:通过后端Api去获取前端路由表,原因是每个登录角色对应的前端路由表可能是不一样的(权限问题) 二.遇到的问题因为前端Vue+ElementUI项目是单页应用--即只有一个index.html页面,如果路由从远程获取的话,每次F5或点击刷新按钮刷新页面的时候,就会找不到对应的路径而报404错误三.解决方案 1.通过api远程获取路由,然后在前端生成对应路由 /* 将
vue下使用nginx刷新页面404的问题解决

nginx 是一个代理的服务器. 出现的问题:写好的页面通过nginx作为代理的服务器给别的同事看的时候发现了新写的页面打开就404,并且从其他页面跳转可以看到但是刷新页面就404. 解决方法: 在文件中的nginx.conf文件中修改,代码如下 server { listen YYYY; //自己设置的端口号 server_name 192.168.XXX.XXX; //在黑窗口下ipconifg后出现的IPv4地址复制 location /{ root E:/website_wap/dist
vue打包上传服务器刷新404问题的两种方案

一:nginx服务器解决方案,修改 .conf 配置文件有两种解决方案 1: location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; } 2: location / { error_page 404 /index.html; #try_file $uri $uri/ /index.html =404; } 二:apach
Vue3刷新页面报错404的解决方法

vue-router历史模式最近在学习Vue3的过程中遇到了一个问题,那就是在写代码的过程中,每当代码发生了变动,页面一刷新,原先的页面就会变成这个样子: 打开控制台一看: 这时候刷新.在浏览器地址栏直接输入地址也不管用. 每次写一点代码,都不能及时看到结果,需要从8080重新进入才可以,其中的崩溃可想而知. 此时判断应该是路由跳转的问题,于是来到router.js文件看一看: import { createRouter, createWebHistory } from 'vue-router
SpringBoot启动访问localhost:8080报错404的解决操作

1.确定本地网络是通的: 2.确定SpringBootq启动后是不报错的 3.查看是不是自己在配置文件中加入了项目路径: 如果加入了项目路径的话,直接访问localhost:8080是不会到欢迎页面的,需要加上项目路径才能访问到欢迎页面,即localhost:8080/sell 补充知识:SpringBoot的web项目启动起来无法访问,访问时还是提示无法访问该网站有时候可能是因为你的pom中导入了太多的依赖,一些依赖之间可能存在冲突导致项目未完全启动而无法访问显示:无法访问该网站以上这篇S
Yii使用DeleteAll连表删除出现报错问题的解决方法

本文实例讲述了Yii使用DeleteAll连表删除出现报错问题的解决方法.分享给大家供大家参考,具体如下: 删除数据的时候,经常会遇到连联判断删除数据的条件,今天用Yii 的CDbCriteria生成关连条件.批量删除的时候数据库报错. 页面代码为: $criteria=new CDbCriteria; $criteria->join = ' LEFT JOIN {{positions}} p ON p.zpo_id=t.zpo_id '; $criteria->addCondition(&q
react创建项目启动报错的完美解决方法

目录一.预备知识: 二.创建项目步骤: 三.启动项目时可能出现的报错: 四.Todolist项目相关库: 五.GitHub搜索案例相关库: 六.尚硅谷路由案例相关库: 七.UI库案例相关库: 八.redux相关库: 一.预备知识: npm (也可以用yarn,本文以npm为例) npm介绍全称为Node Package Manager,是随同NodeJS一起安装的包管理工具. 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地
Kendo Grid editing 自定义验证报错提示的解决方法

Kendo UI是一个强大的框架用于快速HTML5 UI开发.基于最新的HTML5.CSS3和JavaScript标准. Kendo UI包含了开发现代JavaScript开发所需要的所有一切,包括:强大的数据源,通用的拖拉(Drag-and-Drop)功能,模板,和UI控件. 今天开始就对项目里使用的kendo控件技巧做记录,有个别错误希望大家不吝指出,谢谢. 首先就是Grid控件编辑是,验证错误时弹出的提示居然是中文加字段名字,如下图.抓狂啊!!请问这样的低级的提示能拿得出手吗? 这样的提示
PHP 500报错的快速解决方法

1 先看nginx error.log 指定的错误日记文件路径找到这个日记文件看里面信息 2 再看 php-fpm.conf 里面指定的PHP错误日记的路径具体如下 php_flag[display_errors] = off php_admin_flag[log_errors] = on php_admin_value[error_log] = /data/logs/fpm-php.log 以上就是小编为大家带来的PHP 500报错的快速解决方法全部内容了,希望大家多多支持我们~
Android Studio 报错“app:processDebugResources"解决方法

Android Studio 报错"app:processDebugResources"解决方法 Android Studio项目Build的时候报了这么一个错误: Error:Execution failed for task ':app:processDebugResources'. > com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Pro
python安装dlib库报错问题及解决方法

问题描述我是debain 系的linux系统没遇到这个问题,在centos系统遇到的 Collecting dlib Downloading http://mirrors.cloud.aliyuncs.com/pypi/packages/63/92/05c3b98636661cb80d190a5a777dd94effcc14c0f6893222e5ca81e74fbc/dlib-19.19.0.tar.gz (3.2MB) 100% |███████████████████████
Pycharm中import torch报错的快速解决方法

Pycharm中import torch报错问题描述: 今天在跑GitHub上一个深度学习的模型,需要引入一个torch包,在pycharm中用pip命令安装时报错: 于是我上网寻求解决方案,试了很多都失败了,最后在:Anne琪琪的博客中找到了答案,下面记录一下解决问题的步骤: 1.打开Anaconda prompt执行下面命令: conda install pytorch-cpu torchvision-cpu -c pytorch 等待运行结束. 2. 测试torch是否安装成功 impo
Vue-router 报错NavigationDuplicated的解决方法

版本:3.1.x 报错原因: 使用push().replace()进行导航时,不能重复导航到当前路由. 解决办法: 方法1:在定义路由的文件中router/index.js const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push (location) { return originalPush.call(this, location).catch(err => err) } co

Vue3刷新页面报错404的解决方法

vue-router历史模式

相关推荐

随机推荐