하위 경로가 여전히 상위 구성 요소만 로드하고 있습니다.

하위 경로가 여전히 상위 구성 요소만 로드하고 있습니다.

그래서 아이 루트가 있는 설정 페이지를 만들려고 합니다.예를 들어 /settings/user, 다음으로 /settings/branches 등을 원합니다.단, /settings 또는 그 자경로를 로드할 때마다 부모 설정 컴포넌트만 표시됩니다.

여기 my routes.js 파일이 있습니다.

// Imports
import Vue from 'vue';
import VueRouter from 'vue-router';
import Store from './store';

// Set to use
Vue.use(VueRouter);

// Views
import Home from './views/Home/';
import UserIndex from './views/UserIndex';

// Grab Routes
import Settings from './routes/Settings'

// Create our routes
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/users',
    name: 'users.index',
    component: UserIndex,
  },
].concat(Settings);

여기 Settings.js(나중에 메인 루트 폴더에서 연락)가 있습니다.

// Routes for /Settings/
import Settings from '../views/Settings/';
import Branches from '../views/Settings/Branches';

const routes = [
  {
    path: '/settings',
    name: 'settings',
    component: Settings,
    children: [
      {
        name: 'branches',
        path:'branches',
        component: Branches
      }
    ]
  }
]
export default routes;

/views/settings/branches.표시하다

<template>
    <div>
      <p>Branches page</p>
    </div>
</template>

<script>
  export default {
    components: {

    }
  }
</script>

/syslog/syslog/index.vue

<template>
    <div>
      <p>settings page</p>
    </div>
</template>

<script>
  export default {
    components: {

    }
  }
</script>

포함시키기만 하면 됩니다.<router-view></router-view>설정 페이지로 이동하여 자신의 자식을 렌더링할 수 있습니다.그런 다음 를 통해 탐색할 수 있습니다./settings/branches링크를 클릭합니다.

언급

<template>
    <div>
      <p>Settings page</p>
      <router-view></router-view>
    </div>
</template>

언급URL : https://stackoverflow.com/questions/57174939/child-routes-are-still-only-loading-parent-component