programing

Vue 2/VueRouter : 하위 경로에서 페이지를 새로 고칠 수 없음

prostudy 2022. 5. 8. 22:03
반응형

Vue 2/VueRouter : 하위 경로에서 페이지를 새로 고칠 수 없음

(위의 예에서) 아동 경로를 탐색할 때 무슨 일이 벌어지는지 알 수 없다.http://<mydomain>/applis)) 그리고 나서 페이지를 새로 고침 => 나는

찾을 수 없음 // 요청한 URL /applis를 이 서버에서 찾을 수 없음

import MyComponentView from './components/MyComponent.vue'
import LoginView from './components/Login.vue'
import NotFoundView from './components/404.vue'
import DashboardView from './components/subcomp1/Dashboard.vue'
import ApplisView from './components/subcomp1/Applis.vue'

const routes = [
  {
    path: '/login',
    component: LoginView
  }, {
    path: '/',
    component: MyComponentView,
    children: [
      {
        path: '',
        component: DashboardView,
        name: 'Dashboard',
        description: 'Overview of environment'
      }, {
        path: '/applis',
        component: ApplisView,
        name: 'Applis',
        description: 'Applications list'
      }
    ]
  }, {
    path: '/*',
    component: NotFoundView
  }
]
export default routes

내가 아동 경로의 기본 개념을 이해하지 못한 건 아닐까?

당신의 경우 잘못된 것으로 보이는 것은 부모님의 경로와/가 이미 있는 동안/loginroute. 역시 의 자식이다./. 설명서에 다음과 같이 나와 있다.

/로 시작하는 중첩된 경로는 루트 경로로 처리된다.이렇게 하면 중첩된 URL을 사용하지 않고도 구성 요소 중첩을 활용할 수 있다.

여기서 를 들어, 중첩된 경로를 갖는 방법에 대한 아이디어를 얻을 수 있다.이 링크의 샘플 코드:

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        // UserHome will be rendered inside User's <router-view>
        // when /user/:id is matched
        { path: '', component: UserHome },

        // UserProfile will be rendered inside User's <router-view>
        // when /user/:id/profile is matched
        { path: 'profile', component: UserProfile },

        // UserPosts will be rendered inside User's <router-view>
        // when /user/:id/posts is matched
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

만약 당신이 당신의 변경사항으로 피디를 만들 수 있다면, 이것은 정확한 수정을 제공하는 데 도움이 될 것이다.

참조URL: https://stackoverflow.com/questions/41504715/vue-2-vuerouter-cant-refresh-page-when-on-children-routes

반응형