About Vue3 refresh page error 404 solution

When I was writing a VUE3 project recently, I encountered a problem. An error occurred as soon as the page was refreshed.

as follows:

 

 Check the console error message is 404.

At this time, it is useless to refresh the page, and I can only re-enter the address. When I think that I have to enter the address every time the code changes, I feel bad. I read many methods on the Internet, but the initial judgment should be my router routing problem.

So take a look at my index.js code:

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

Didn't find anything wrong either. Harm, this is true. . .

Later, I slowly checked and the comments of netizens found that it was a problem with the history mode of vue-router, that is to say, the history mode in vue3 was changed to HTML5 mode by default:createWebHistory()

When we go to use this history mode, the URL will look "normal", eg https://xxxx.com/user/id. However, here comes the problem. https://xxxx.com/user/idSince our application is a single-page client-side application, without proper server configuration, users will get a 404 error when accessing it directly in the browser  . problem lies in

How did that work out?

We only need to change one place to replace createWebHistory with createWebHashHistory()

By the way, don't forget to introduce createWebHashHistory too. (I introduced it on demand here)

Finally, look at the complete code:

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, solved.