Vue2는 페이지를 새로 고칠 때 기본 페이지로 리디렉션됩니다.

Vue2는 페이지를 새로 고칠 때 기본 페이지로 리디렉션됩니다.

나는 vue2를 작업하려고 했다.이상한 문제에 봉착했어요4가지 경로가 있습니다.

1. /syslog 사용자가 로그인하지 않으면 이 페이지가 표시되므로 사용자가 로그인할 수 있습니다.
2. /user 로그인 시 이 페이지로 리다이렉트 됩니다.
3. /다른 작업을 위해 이 페이지를 교육합니다.
4. /documents/collaboration은 이 라우터를 사용하는 경우 train 컴포넌트만 렌더링하지만 URL은 BASE_URL/documents/collaborate가 됩니다.

문제는 /train 페이지를 갱신하거나 콜라보레이션 URL을 붙여넣으면 /uploads로 리다이렉트 됩니다.

무엇이 문제인지, 왜 이런 일이 일어나는지 알 수 없다.

라우터의 코드를 다음에 나타냅니다.js

import Vue from 'vue'
import Router from 'vue-router'
import LoginPage from './views/Login.vue'
import Uploads from './views/Uploads.vue'
import Train from "./views/Train";

Vue.use(Router)


export const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/login',
      name: 'login',
      component: LoginPage,
      meta: {bodyClass: 'auth-wrapper'}
    },
    {
      path: '/', redirect: '/uploads'
    },
    {
      path: "/uploads",
      name: 'Uploads',
      component: Uploads,
      meta: {bodyClass: 'full-screen', verboseName: 'Data Classifier', icon: '@/assets/img/company5.png'}
    },
    {
      path: "/train",
      name: 'Train',
      component: Train,
      meta: {bodyClass: 'full-screen', verboseName: 'Data Trainer', icon: '@/assets/img/company5.png'}
    },
    {
      path: "/documents/collaborate/:id",
      name: "Collaborate",
      component: Train,
      meta: {bodyClass: 'full-screen', verboseName: 'Data Trainer', icon: '@/assets/img/company5.png'}
    }
  ]
})

router.beforeEach((to, from, next) => {
  // redirect to login page if not logged in and trying to access a restricted page
  const publicPages = ['/login'];
  const authRequired = !publicPages.includes(to.path);
  const loggedIn = localStorage.getItem('user-token');

   if (authRequired && loggedIn === null) {
     return next('/login');
   }
   if (loggedIn !== null && !authRequired) {
     return next('/uploads');
   }
  next()

})

export default router;  

리다이렉트/uploads그 이후if (loggedIn !== null && !authRequired) {...}상태는 내면에 참이다.route.beforeEach(). 변경:

router.beforeEach((to, from, next) => {
   ...
   if (authRequired && loggedIn === null) {
     return next('/login');
   }

   // navigate to to.path() page
   next();
})

언급URL : https://stackoverflow.com/questions/55823143/vue2-when-refreshing-any-page-it-redirects-to-the-main-page