子路由仍然只加载父组件

Posted 2023-02-22

【中文标题】子路由仍然只加载父组件

【英文标题】：Child routes are still only loading parent component

【发布时间】：2019-12-02 03:16:37

【问题描述】：

所以我正在尝试创建一个包含子路由的设置页面。例如，我想要 /settings/user，然后是 /settings/branches 等。但是，每次我加载 /settings 或其任何子路由时，它只显示父 Settings 组件。

这是我的 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.vue

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

<script>
  export default 
    components: 

    
  
</script>

/views/settings/index.vue

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

<script>
  export default 
    components: 

    
  
</script>

【问题讨论】：

***.com/questions/50247097/…

【参考方案1】：

只需将<router-view></router-view> 包含到设置页面，这样它就可以呈现自己的孩子。然后你可以通过/settings/branches链接导航到它。

Reference

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

【讨论】：

第二个建议不正确。来自文档：Note that nested paths that start with / will be treated as a root path.