Vue3 ページ更新エラー 404 の解決策について

最近 VUE3 プロジェクトを作成していたときに、ページを更新するとすぐにエラーが発生するという問題が発生しました。

次のように：

コンソールのエラーメッセージが 404 であることを確認します。

このときページを更新しても無駄でアドレスを再入力するしかないのですが、コードが変わるたびにアドレスを入力しなければいけないと思うと気分が悪いです。インターネットで多くの方法を読みましたが、最初にルーターのルーティングの問題を判断する必要があります。

それでは、私の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/id404 エラーが発生します。問題は～にあります

それはどうなりましたか?

1 か所を変更するだけで、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

はい、解決しました。

Vue3 ページ更新エラー 404 の解決策について

おすすめ