Vue Router, 새로 고침 시 공백 페이지가 표시됨

Vue Router, 새로 고침 시 공백 페이지가 표시됨

Vue.js 라우팅이 홈 컴포넌트로 리다이렉트된 후 빈 페이지만 표시되며 두 번째 리프레시 후 홈 컴포넌트가 다시 표시되는 이유를 알아보려고 합니다.admin 페이지에 URL로 직접 접속할 수 있기 때문에 아직 로그인 중입니다.즉, 세션이 아직 활성화되어 있습니다.F5 키를 눌렀을 때 관리 홈페이지에서 페이지를 강제로 유지할 수 있는 방법이 있습니까?히스토리 모드 등을 시도해 봤지만 알 수 없습니다.

이것은 루트에 있는 my router.js 레이아웃이며 메인 라우터 파일도 마찬가지입니다.

import Vue from 'vue'
import Router from 'vue-router'
import firebase from "firebase/app";
import Home from './views/user/Home.vue'
import adminRoute from "./components/routes/admin-routes";

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '*',
      redirect: '/',
    },
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: false,
      }
    },
      ...adminRoute
  ],
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(r => r.meta.requiresAuth === false)) {
    next()
  } else if (!firebase.auth().currentUser) {
    next(false)
  } else {
    next()
  }
});

export default router

관리 루트가 있어요js

    import AdminHome from "../../views/admin/AdminHome";
    import Users from "../../views/admin/Users";

    const adminRoute = [
        {
            path: '/admin-home',
            name: 'AdminHome',
            component: AdminHome,
            meta: {
              requiresAuth: true
            },
        },
        {
            path: '/users',
            name: 'Users',
            component: Users,
            meta: {
                requiresAuth: true,
            }
        }
    ];

export default adminRoute;

메인 페이지가 뷰/사용자/홈 아래에 있음을 꼭 언급하고 싶습니다.vue 및 내 Admin Home 페이지는 views/admin/Admin Home입니다.표시하다

이 문제는 404를 관리해야 하는 빌드된 앱이 아니라 서버로 반환됩니다.여기서 해결책을 찾을 수 있습니다.

Netlify 를 사용하는 경우는, 프로젝트의 루트(package.json 와 같은 장소)에, netlify.toml 로 다음의 파일을 작성합니다.

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

vue4에서는 next 인수(여기를 참조)를 삭제했습니다.이것은 사용자를 로그인 페이지로 되돌리기 위한 것입니다.여기서 firebaseui를 사용하고 있습니다.vuex 스토어에는 "isAuthenticated"라는 이름의 간단한 부울 플래그가 있습니다.이 플래그는 사용자가 서명할 때 켜집니다.

메모: 다음은 Quasar v2용 부트 파일입니다만, 스토어에 액세스 할 수 있는 장소라면 어디에서라도 논리는 기능합니다.

import { computed } from 'vue'

export default ({ app, router, store }) => {
    console.log('nav.js:')
    const isAuthenticated = computed(() => store.state.auth.isAuthenticated)
    console.log('isAuthenticated',isAuthenticated.value)
    router.beforeEach((to, from) => {
        console.log('nav.js:beforeEach:to',to)
        console.log('nav.js:beforeEach:from',from)
        if (to.matched.some(record => record.meta.requiresAuth)) {
            if (!isAuthenticated.value) {
                console.log('nav.js:beforeEach:to.redirect')
                return '/login'
            }
        }
    })
    
}

언급URL : https://stackoverflow.com/questions/58541229/vue-router-refresh-shows-blank-page