laravel - 子路由仍仅加载父组件

所以我试图创建一个有子路由的设置页。例如，我想要/settings/user，然后/settings/branchs等。但是，每次加载/设置或其任何子路由时，它都只显示父设置组件。
这是我的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;

/视图/设置/分支.vue

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

<script>
  export default {
    components: {

    }
  }
</script>

/视图/设置/索引.vue

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

<script>
  export default {
    components: {

    }
  }
</script>

最佳答案

只需将<router-view></router-view>包含到“设置”页，它就可以呈现自己的子级。然后您可以通过/settings/branches链接导航到它。
Reference

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

关于laravel - 子路由仍仅加载父组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57174939/