Vue路由器，刷新后显示空白页

Question

我正在尝试弄清楚为什么Vue.js路由在我刷新管理员页面后会重定向回主页组件，只显示一个空白页面，并在第二次刷新后再次显示主页组件。 我仍然登录，因为我仍然可以直接使用网址进入我的管理页面。 这意味着会话仍然活动。 有没有办法在按下F5时强制页面停留在管理员主页？ 我尝试过像history模式等的东西，但是无法弄清楚。

这是我的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。

- John'Sters

---

你是否找到了解决这个问题的方法，因为我也遇到了同样的问题。 - murday1983

抱歉回复晚了。是的，我做了。不过我的原始方法是错误的。我会再看一下并告诉你我做了什么。如果你还没有找到解决问题的答案。 - John'Sters

请问解决方案是什么？ - bjacob596

你找到解决方法了吗？当我点击浏览器的刷新按钮时，页面变成黑色。如果你能分享你的修复方法，我会非常感激。 - skate_23

Answer 1

这个问题是返回到服务器而不是构建应用程序，您需要管理您的404未找到根目录。在这里您可以找到解决方案 如果您使用Netlify，只需在项目的根目录（与package.json相同的位置）中创建一个名为netlify.toml的文件，其中包含以下内容。

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

- Achref Abdeljalil

Answer 2

在Vue4中，他们不再使用“next”参数(请看这里)，对于我来说，这很好用，可以将人们发送回登录页面，在那里我使用firebaseui，我在我的vuex store中有一个简单的布尔标记名为“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'
            }
        }
    })
    
}

- jessie james jackson taylor