Vue SPA 사이트에서 동일한 페이지 다시 로드

Vue SPA 사이트에서 동일한 페이지 다시 로드

나는 이것을 하기 위해 십여 가지 방법을 시도했다. .htaccess아파치 호스팅(내 사이트를 호스트하는 내가 선호하는 환경), Heroku를 통해, netlify를 통해_redirects서류철과netlify.toml그리고 그들 중 아무도 작동하지 않는 것 같다.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>

그러나 그것은 같은 페이지로 다시 로드되지 않는다.주 인덱스.html 페이지로 다시 로드된다.자, 왜 그런 짓을 하는지 알겠다.본질적으로 SPA의 모든 페이지는 index.html이다.그것은 다른 페이지처럼 보이게 만드는 구성요소들이다.하지만, 이것은 내가 본 모든 SPA 사이트에서 효과가 있다.그래서 내가 다시 로드할 때 렌더링의 일관성을 유지할 수 있는 방법이 있을 거야.

중요한 경우, 여기에 관련 코드가 있다.

환경

• VueJS 2
• 퀘이사 1.0
• 파이어베이스
• Vuew 라우터(VueJS의 박스 외부)

콰사르.CONF.JS

  build: { vueRouterMode: "history" }

ROATES.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도 없음)을 보여준다.히스토리 모드는 URL에서 #를 제거하고 해시 모드에 넣어도 수정되지 않는다.

어떤 도움이라도 감사할 것이다.

경로 파일(내 설정에서 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 문제를 해결할 수 있었다.그러나 콰사르는 배후에서 다른 일을 하고 있을지도 모른다.바라건대 이 접근방식이 너의 접근방식에 도움이 될 수 있기를 바란다.

참조URL: https://stackoverflow.com/questions/59532685/reloading-same-page-in-a-vue-spa-site