Vue.js 中的动态路由，未找到

Question

我有这个index.js文件用于路由并安排/game/:game用于动态路由。

import { createRouter, createWebHistory } from "vue-router";
import HomeView from "@/views/HomeView.vue";
import NotFound from "@/views/404.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
    },
    {
      meta: { title: "Game Detail" },
      path: "/game/:game",
      name: "gameDetail",
      component: () => import("@/views/GameDetailView.vue"),
    },
    {
      meta: { title: "404" },
      path: "/:pathMatch(.*)*",
      name: "NotFound",
      component: NotFound,
    },
  ],
});

router.beforeEach(async (to, from, next) => {
  const title = to.meta.title || null;
  const appTitle = "GameApp";
  document.title = title ? `${title} | ${appTitle}` : appTitle;
  next();
});

export default router;

我还添加了这个.htaccess

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

但是，当我访问domain.com/game/game_name 时，我收到了 url not found 错误。

Answer 1

vue-router

在本地工作吗？

.htaccess

配置不错。检查

mod_rewrite

是否已加载

apachectl -M | grep rewrite

（如果运行 Red Hat/Suse，请将

apachectl

替换为

httpd

）。