主页 / 问题 / 1373737
Accepted
vegasmoscow
Asked:2022-06-21 19:47:08 +0000 UTC2022-06-21 19:47:08 +0000 UTC

为什么 Vue 不显示内部页面而只显示主要页面？

  • 772

我正在用 Vue 编写一个小型投资组合应用程序。用了路由器。我组装了站点，将其上传到服务器，这就是发生的事情，当我转到主页时，一切正常，单击链接打开页面。但是如果直接进入内部页面，就会显示错误——找不到页面。

例如，如果您先访问 site.ru，然后通过导航访问 site.ru/page，则所有页面都会打开。如果您立即访问 site.ru/page，则会显示错误。逻辑很清楚，SPA 仅从主页加载，然后导航链接开始工作。但是，如何向某人发送内部页面的链接或将其添加为书签？

我读到您需要在路由器中设置 mode: 'history' ，但这没有帮助。我也没有在文档中找到任何内容。

这是我的路由器文件：

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/trainer',
    name: 'Trainer',
    component: () => import('../views/Trainer.vue')
  },
  {
    path: '/404',
    name: '404',
    component: () => import('../views/NotFound.vue')
  },
  {
    path: '/:catchAll(.*)',
    redirect: '/404'
  }
]

const router = createRouter({
  mode: 'history', //(не помогает)
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

如何设置 SPA 以便可以直接访问任何内部链接，就像常规站点一样？

vue.js

2 个回答

  1. 为了使 Vue 应用程序与后端正常工作，您需要在服务器上复制路由（/trainers、/404），以便所有页面的后端都提供给 Vue 应用程序（index.html）。

    • 0
  2. Best Answer

    在这里，您需要查看目录结构——路由引用的位置以及它们如何拦截，以及服务器是如何被提升的。为了让 Vue 路由器正常工作，所有请求都必须重定向到 Vue 生成的 index.html。如果同时需要保存后端请求，则可以执行以下操作：

    RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/(api)/ [NC]
RewriteRule . /index.html  [L]

    此文件会将所有请求重定向到 index.html，但包含 API 的 URL 除外。

    • 0

相关问题