Question

我已经尝试了十多种方法来做到这一点。 .htaccess在Apache托管（我托管网站的首选环境）中，通过heroku，通过带有_redirects文件和netlify.toml文件的netlify。而且它们似乎都不起作用。 Vue建议像这样编写.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>

但是不会重新加载到同一页面。它会重新加载到index.html主页。现在，我明白为什么要这样做了。本质上，SPA中的每个页面都是index.html。是使它看起来像另一个页面的组件。但是，这在我见过的每个SPA网站中都有效。因此，当我重新加载时，必须有一种方法可以使渲染保持一致。

如果有关系，这里有一些相关代码

环境

VueJS 2
Quasar 1.0
Firebase
Vuew路由器（在VueJS中是开箱即用的）

QUASAR.CONF.JS

  build: { vueRouterMode: "history" }

ROUTES.JS（最小）

import Layout from "layouts/Layout.vue";
import Home from "pages/Index.vue";
import About from "pages/About.vue";
import Contact from "pages/Contact.vue";


const routes = [
  {
    path: "/",
    component: Layout,
    children: [
      { path: "/", component: Home },
      { path: "/about", component: About },
      { path: "/contact", component: Contact }
    ]
  }
];

// Always leave this as last one
if (process.env.MODE !== "ssr") {
  routes.push({
    path: "*",
    component: () => import("pages/Error404.vue")
  });
}

export default routes;

如果您需要查看任何内容，请告诉我。

问题页面加载正常，但是当我重新加载页面时，它将加载主页面（HOME），即索引页面。没有htaccess代码，它会显示找不到页面（甚至不是我自己的404）。历史记录模式会从网址中删除＃，并且将其置于哈希模式也无法解决该问题。

任何帮助将不胜感激

Answer 1

通过在路由文件中设置模式和路由器（我的设置中为src / routes / index.js），我能够将应用程序从哈希转换为历史记录而没有问题：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import NotFound from '../components/NotFound.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '*',
    component: NotFound,
  },
];

const router = new VueRouter({
  mode: 'history',
  routes,
});

export default router;

通过设置模式并导出路由器，我能够从我的应用程序中解决404问题。但是，Quasar可能正在做其他事情。希望这种方法可以对您有用。

在Vue SPA网站中重新加载同一页面

1 个答案: