使用 Vue 在站点上共享 link 时加载问题

Question

我创建了一个使用 Vue 作为前端框架并使用 CMS CosmisJS 来管理内容的网站。我的站点使用 Vue Router、Vuex 和 Vue Meta 等，并托管在 Netlify 上。

我的网站工作正常，您可以在不同的路线和信息加载之间导航而没有问题，但是，当我与路线共享 link 时，例如 http://example.com/route，页面根本不加载并向我显示一个 Netlify 错误，显示“找不到页面”，即使该路由存在并且如果您从根路由导航可以访问。

我想不通问题出在哪里。我认为这可能是与 API 调用的加载时间相关的错误，或者是我的 Vue Router 配置中的一些错误，但我进行了更改但问题仍然存在。

知道它可能是什么吗？

这是我的 Vue Router 的简化版本。

import Vue from "vue";
import VueRouter from "vue-router";
import CentroEstudios from "../views/CentroEstudios.vue";
import Nosotras from "../views/Nosotras.vue";
import Index from "../views/Index.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Index",
    component: Index,
  },
  {
    path: "*",
    name: "NotFound",
    component: NotFound,
  },
  {
    path: "/centro-de-estudios",
    name: "Centro de Estudios",
    component: CentroEstudios,
  },
  {
    path: "/nosotras",
    name: "Nosotras",
    component: Nosotras,
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

Answer 1

这是在路由器上使用 history 模式的结果。 https://router.vuejs.org/guide/essentials/history-mode.html

Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser. Now that's ugly.

您需要配置Netlify以兼容历史模式： https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps

这是 netlify 支持论坛上的另一个相关 post： https://answers.netlify.com/t/vue-app-not-routing-correctly-when-deployed/6363

或者，如果对于您正在制作的网站来说没问题，您也可以只使用默认的散列模式，这样您就不会遇到这个问题，但是您之前在所有 URL 路径。

使用 Vue 在站点上共享 link 时加载问题

Loading problems when sharing a link on a site with Vue

vue.js

vue-router

vuejs2