Question

我试图弄清为什么Vue.js路由，在刷新管理页面后将重定向到home组件，仅显示空白页面，并且在第二次刷新后再次显示home组件。我仍然登录，因为我仍然可以直接使用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

Answer 1

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

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

<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="app/categories">Menu</ion-back-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button color="primary" (click)="addStudent()">
        Add New
      </ion-button>
    </ion-buttons>
    <ion-title>
      All tests
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content ion-padding color="primary">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">User Manual Tests</ion-title>
    </ion-toolbar>
  </ion-header>

  <!--Serachbar-->
  <ion-searchbar [formControl]="searchControl" (ionChange)="onSearchInput()">
</ion-searchbar> 

<!--Spinner for serach box-->
 <div *ngIf="searching" class="spinner-container">
   <ion-spinner></ion-spinner>
 </div>

  <!--<ion-list *ngFor="let student of students">-->
    <ion-list *ngFor="let test of tests" color="primary"> 
    <ion-item-sliding>

    
    <ion-item >
      <ion-avatar slot="start">
        <div class="avatar">
          <!--{{student.name.substring(0,1).toUpperCase()}}-->
          {{test.investigation.substring(0,1).toUpperCase()}}
        </div>
      </ion-avatar>
      <ion-label>
        <!--
        <h3 class="title">{{student.name}}</h3>
        <p class="subtext">
          {{'From ' + student.address + ' Tel: ' + student.phone}}
        </p>
      -->
      <h3 class="title">{{test.investigation}}</h3>
       <p class="subtext">Speciman Type:
        {{test.SpecimanType}}
        <br> {{test.Comments}}
        <br>Container: 
        {{test.container}}
        <br>Phone:
        {{test.phone}}
        <br>TAT: {{test.TAT}}
        <br>Phoning Criteria: {{test.phoneCriteria}}
        <br>Referred Tests (Y/N): {{test.referred}}
      </p>
      <div class = "subtext" *ngIf="test.referred == 'Y'">

        <a (click)="openBrowser(test.refWebsite)">{{test.refWebsite}}</a>
        <a href="{{test.refWebsite}}">OPEN {{test.refWebsite}}</a>

        <p (click) = "callPhoneNumber(test.refNumber)">
        Refferal Number: <a>{{test.refNumber}}</a></p>
    </div>
      </ion-label>
    </ion-item>
    <ion-item-options slide="end">
      <ion-item-option color="danger" (click) = "removeTest(test.id)">
        <ion-icon name="trash"></ion-icon>

      </ion-item-option>
      <ion-item-option color="success" (click)="updateStudent(test)">
        Edit

      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
  </ion-list>
  <!-- <div id="container">
    <strong>Ready to create an app?</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
  </div> -->

</ion-content>

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

1 个答案: