Vue 라우터를 사용하여 경로를 리디렉션하는 방법

Vue 라우터를 사용하여 경로를 리디렉션하는 방법

그것은 내가 Vue를 처음 사용하는 것이다.예를 들어, JS와 나는 내 응용프로그램을 도메인별로 정리하고 있다. 예를 들어, 주 라우터 파일을 가지고 있다. 적절한 도메인을 위해 일부 라우트를 리디렉션한다.

               +--> /users +
               |           |         +-----------------+
+--------------+           |         |     +-----------+
|              |           |         |     |           |    + Profile
|  Index Page  |           |         |users        <--------+ Create
|              |           +-------> |     |           |
|              |                     |     +-----------+
+--------------+                     +-----------------+

안쪽에/usersusers-properties.js는 다음과 같은 기능을 가지고 있다.

const userRoutes = [
  {
    path: '/profile',
    component: () = import('./views/users/UserProfile')  
  }
];

export default userRoutes

몇 가지 코드를 검색하면서, 나는 내 주요 경로 안에서 지원해야 한다.

import Vue from 'vue'
import Router from 'vue-router'
import { userRoutes } from './views/users/users-routes'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: () => import('@/views/Index'),
      children: [
        // Dashboard
        {
          name: 'Dashboard',
          path: '',
          component: () => import('@/views/Dashboard'),
        },
      ],
    },
    {
      path: '/users',
      redirect: '/users',
    },
  ], 
  ...userRoutes
})

을 가리키며 두 가지 경고를 받는다....userRoutes선을 긋다

27:5 오류 후행 공백이 허용되지 않음
28:19 오류 쉼표-당글 후행 누락

어떻게 진행하면 좋을까?

의무적으로, 「A를 하고 싶은 모양이군.A은 나쁘다대신 B를 하라."

정확하고 간단한 옵션은 주요 경로에 포함된 경로를 유지하는 것이다../src/router.js문서들이 지적하는 바와 같이.거기서부터 한 번.vuex의 가치.isLoggedIn. 그럼 다음엔.template"사용자" 페이지의 레이어, 다음 작업을 수행하십시오.v-if사용자가 로그인했는지 여부를 확인하십시오.

이것은 한 걸음 더 나아가서 앞으로 나아갈 수 있다.created훅, 사용자가 로그인한 경우 점검이 가능하다.그리고 그렇지 않은 경우, 라우터는 사용자를 로그인 페이지로 밀어넣을 수 있다(또는 로그인 모달 중 하나).

참조URL: https://stackoverflow.com/questions/62457583/how-to-redirect-routes-using-vue-router