Vue router2가 깊은 중첩 경로를 캡처하지 않음

Vue router2가 깊은 중첩 경로를 캡처하지 않음

나의 경로에는 다음과 같은 구조가 여러 파일로 나뉜다.

export const router = new VueRouter({
    mode: 'hash',
    base: __dirname,
    saveScrollPosition: true,
    history: true,
    routes : Array.concat(userRoutes, siteRoutes)
})

...
// user/routes.js

export const userRoutes = [
    {
        path: '/user',
        name: 'user_main',
        component: UserMain,
        meta: {authRequired: true},
        children: Array.concat([
            ...
            ], accountRoutes)
    }
]


// account/routes.js 

export const accountRoutes = [
    {
        path: 'account',
        name: 'user_account',
        component: AccountMain,
        children: [
            {path: 'edit',  name: 'user_edit_account', component: EditAccount},
            {path: 'addresses',  name: 'user_addresses',  component: Addresses},
        ]
    }
]

그리고 나는 잡으려고 노력하고 있다.

/user/account/addresses

그러나/ 예상한 구성요소가 아닌 AccountMain 구성요소를 얻는다.만약 내가 계정 경로에서 주소 구성요소를 꺼내서 그것이 작동한다고 말하도록 그것을 움직인다면, 그러나 나는 AccountMain으로 연락할 수 없다.AccountMain의 다른 구성 요소에 대해서도 동일함

if I try to get anything under accounted understanding understand

/user/account/blah 

해당 보기의 빈 페이지를 반환한다.

하지만, 덧붙이자면

beforeEnter: (to, from, next) => {
    to.matched.forEach(m => console.log(m.name)) 
}

AccountMain의 경로 정의에서 추가 및 예상 이름 출력

user_main
user_account
user_addresses

따라서 이름을 찾지만 하위 구성 요소 주소 대신 상위 구성 요소(AccountMain)를 반환한다.다음과 같은 경로 정의에서 AccountMain 구성요소를 제거해도 여전히 주소에 접속할 수 없고 빈 페이지를 얻을 수 없으므로, 이것은 AccountMain 구성요소와는 관련이 없다.

export const accountRoutes = [
    {
        path: 'account',
        name: 'user_account',
        children: [
            {path: 'edit',  name: 'user_edit_account', component: EditAccount},
            {path: 'addresses',  name: 'user_addresses',  component: Addresses},

        ]
    }
]

나는 vue 라우터 2.1.1을 사용하고 있다.

내가 여기서 뭘 잘못하고 있는 거지?

각 부모는 자신의 라우터 보기를 반환해야 하며, 나는 동일한 문제를 가지고 있었고 나는 다음과 같이 수정했다.

export default new Router({
  mode: "history",
  scrollBehavior: () => ({ y: 0 }),
  routes: [
    {
      path: "/",
      component: DefaultContainer,
      redirect: "/dashboard",
      children: [
        {
          path: "/administration",
          redirect: "administration/pros",
          name: "Administration",
          component: {
            render(c) {
              return c("router-view");
            }
          },
          children: [
            {
              path: "rules",
              name: "RulesManagement",
              redirect: "rules",
              component: {
                render(c) {
                  return c("router-view");
                }
              },
              children: [
                {
                  path: "",
                  component: RulesManagement
                },
                {
                  path: "edit/:id",
                  name: "Edit Rule",
                  component: EditRule,
                },
                {
                  path: "add/",
                  name: "Add Rule",
                  component: AddRule,
                }
              ]
            } 
          ]
        }
      ]
    }
  ]
});

따라서 각 상위 경로에 다음을 추가하십시오.

component: {
   render(c) {
      return c("router-view");
   }
}

그리고 그 안에 아이들이 새로운 경로를 추가해서path: ""

이런 문제들이 너희 모두에게 도움이 되었으면 좋겠다.

이곳의 라우터 뷰는 최상위 콘센트로 되어 있다.그것은 최상위 경로와 일치하는 구성요소를 렌더링한다.마찬가지로 렌더링된 구성요소는 자체 중첩된 라우터 뷰도 포함할 수 있다.추가, 중첩 경로.

각 상위 구성요소는 자식 경로에 대한 자체 라우터 뷰를 가질 필요가 있다.지스피들

const UserMain = {
  template: `
    <div class="user">
      <h1>User</h1>
      <router-view></router-view> //a rendered component can also contain its own, nested router-view
    </div>
  `
}

const AccountMain = { 
    template: `
        <div>
      <h1>AccountMain</h1>
      <router-view></router-view> //a rendered component can also contain its own, nested router-view
    </div>
    ` 
}

참조URL: https://stackoverflow.com/questions/41590297/vue-router2-not-catching-deep-nested-routes