如何在Vue Router中正确地添加子路由？

在Vue Router中，添加子路由通常涉及到在父组件的`router-view`标签内使用嵌套的`router-view`。下面是一个基本步骤：

1. 定义父组件：创建一个包含`router-view`的组件，作为路由容器，这通常是App.vue或者你想导航到的地方。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

2. 定义子路由：在你的父组件对应的`components`属性里，定义一个子路由对象，它有一个`name`属性用于标识，以及一个`children`数组，包含其他子路由配置。

import { Route } from 'vue-router';

const routes = [
  // ... 其他路由
  {
    path: '/parent', // 父路由名
    name: 'ParentRoute',
    component: ParentComponent,
    children: [
      {
        path: 'child', // 子路由名
        name: 'ChildRoute',
        component: ChildComponent
      }
    ]
  }
];

3. 使用导航：在需要跳转到子路由的地方，你可以使用`this.$router.push`或`this.$router.go`方法，通过路由名称。

methods: {
  goToChild() {
    this.$router.push('/parent/child');
  }
}