Vue路由器，刷新显示空白页面答案

【问题标题】：Vue Router, refresh shows blank pageVue路由器，刷新显示空白页面
【发布时间】：2020-02-20 18:51:16
【问题描述】：

我试图弄清楚为什么 Vue.js 路由，在我刷新我的管理页面后重定向回主组件，只显示一个空白页面，并且在第二次刷新后再次显示主组件。我仍然登录，因为我仍然可以直接使用我的管理页面的 url。意味着会话仍然处于活动状态。当我按 F5 时，有没有办法强制页面留在管理主页上？我尝试了诸如历史模式之类的东西，但无法弄清楚。

这是我在根目录中的 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

我有我的 admin-routes.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;

我想提一下，我的主页位于views/user/Home.vue 下，而我的AdminHome 页面位于views/admin/AdminHome.vue

【问题讨论】：

你有没有解决这个问题，因为我遇到了同样的问题
抱歉回复晚了。我做了是的。我原来的方法是错误的。我会看看，看看我做了什么，让你知道。如果您还没有找到问题的答案。
请问有什么解决办法
您找到解决方案了吗？当我热浏览器刷新按钮时，我得到一个黑页。如果您分享您的修复程序，将不胜感激。

标签： vue.js vuex getter state-management

【解决方案1】：

这个问题是返回到服务器而不是构建的应用程序 你必须管理你的 404 not found root Here you can find the solution

如果您使用 Netlify，您只需在项目的根目录中创建一个文件（与 package.json 相同的位置）名称为 netlify.toml，其中包含

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

【讨论】：

【解决方案2】：

在 vue4 中，他们取消了“下一个”参数（see here），这对我有用，可以将人们送回登录页面，我正在使用 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'
            }
        }
    })
    
}

【讨论】：