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

最近正在写VUE3项目时，遇到了一个问题，页面一刷新就出错。

如下：

查看控制台报错信息是404。

这时候怎么刷新页面都没有用，只能重新输入地址，一想到每次代码发生改变我都要输入一遍地址，那心情都不好了。在网上看了许多方法都不行，初步判断应该是我的router路由的问题。

那么来看一下我的index.js的代码：

import { createRouter, createWebHistory } from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 路由懒加载
const HomeView = () => import('../views/HomeView')
const LoginView = () => import('../views/LoginView')
const Main = () => import('../components/Main')
const ListView = () => import('../views/ListView')
const SingerListView = () => import('../views/SingerListView')
const SearchDetailPage = () => import('../components/search/SearchDetailPage')
const ExploreHome = () => import('../components/explore/ExploreHome')

const routes = [
  {
    path: '/',
    redirect: '/home'// 重定向到首页页面
  },
  {
    path: '/login',
    component: LoginView
  },
  {
    path: '/main', // Main.vue是路由的主体
    component: Main,
    // Main下的子路由，一切都在Main.vue的<el-main></el-main>里
    children: [
      {
        path: '/home',
        component: HomeView
      },
      {
        path: '/listview',
        component: ListView
      },
      {
        path: '/singerlistview',
        component: SingerListView
      },
      {
        path: '/searchdetailpage',
        component: SearchDetailPage
      },
      {
        path: '/explorehome',
        component: ExploreHome
      }
    ]
  }
]

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

router.beforeEach((to, from, next) => {
  NProgress.start() // 进度条开始
  next()
})

router.afterEach((to, from) => {
  NProgress.done() // 进度条结束
})

export default router

也没有发现不对劲的地方。害，这真是。。。

后面自己慢慢排查以及网友的评论发现是vue-router历史模式的问题，也就是说 vue3中的历史模式默认改为了HTML5模式：createWebHistory()

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

那怎么解决了？

我们只需要改一个地方将createWebHistory换成了createWebHashHistory（）

对了别忘了createWebHashHistory也要引入。（我这里是按需引入的）

最后，看一下完整代码：

import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 路由懒加载
const HomeView = () => import('../views/HomeView')
const LoginView = () => import('../views/LoginView')
const Main = () => import('../components/Main')
const ListView = () => import('../views/ListView')
const SingerListView = () => import('../views/SingerListView')
const SearchDetailPage = () => import('../components/search/SearchDetailPage')
const ExploreHome = () => import('../components/explore/ExploreHome')

const routes = [
  {
    path: '/',
    redirect: '/home'// 重定向到首页页面
  },
  {
    path: '/login',
    component: LoginView
  },
  {
    path: '/main', // Main.vue是路由的主体
    component: Main,
    // Main下的子路由，一切都在Main.vue的<el-main></el-main>里
    children: [
      {
        path: '/home',
        component: HomeView
      },
      {
        path: '/listview',
        component: ListView
      },
      {
        path: '/singerlistview',
        component: SingerListView
      },
      {
        path: '/searchdetailpage',
        component: SearchDetailPage
      },
      {
        path: '/explorehome',
        component: ExploreHome
      }
    ]
  }
]

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

router.beforeEach((to, from, next) => {
  NProgress.start() // 进度条开始
  next()
})

router.afterEach((to, from) => {
  NProgress.done() // 进度条结束
})

export default router

OK，解决了。

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

猜你喜欢