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

Posted 2023-02-22

【中文标题】Vue路由器，刷新显示空白页面

【英文标题】：Vue Router, refresh shows blank page

【发布时间】：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

【问题讨论】：

你有没有解决这个问题，因为我遇到了同样的问题

抱歉回复晚了。我做了是的。我原来的方法是错误的。我会看看，看看我做了什么，让你知道。如果您还没有找到问题的答案。

请问有什么解决办法

您找到解决方案了吗？当我热浏览器刷新按钮时，我得到一个黑页。如果您分享您的修复程序，将不胜感激。

【参考方案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'
            
        
    )