vue router导航栏到底该怎么加？

Question

细致描述一下我的问题：
我的需求其实很简单，但是被vue-router 的router view搞晕了

需求是：做一个导航栏，点击导航，其下方内容改变（也就是切换 一个view）

最开始我是这样想的

在App.vue 文件里面 直接写上 导航如下

App.vue大致代码如下
<router-link to="/">单音</router-link>
<router-link to="/multi">多轨</router-link>
<router-link to="/manageApp">混音</router-link>



<router-view></router-view>

然后 将 这几个link对应的页面设置成 App.vue路径的chirden

就像这样

const routers = [{
  path: '/',
  component: App,
  // meta: { requiresAuth: true },
  children: [{
    path: '/home',
    component: Home,
    children:HomeChild
  }, {
    path: '/manageApp',
    component (resolve) {
      require.ensure(['../views/manage_app.vue'], () => {
        resolve(require('../views/manage_app.vue'))
      })
    },
    children:ManageAppChild
  }, {
    path: '/ManageConfig',
    component (resolve) {
      require.ensure(['../views/manage_config.vue'], () => {
        resolve(require('../views/manage_config.vue'))
      })
    },
    children: ManageConfigChild
  },{
    path: '/publishApp',
    component (resolve) {
      require.ensure(['../views/publish_app.vue'], () => {
        resolve(require('../views/publish_app.vue'))
      })
    },
    children: publishAppChild
  }, {
    path: '/threat-perception',
    name: 'threat-perception',
    component (resolve) {
      require.ensure(['../views/manage_app.vue'], () => {
        resolve(require('../views/manage_app.vue'))
      })
    }
  }]
}

但是，这样点击App里面的导航的时候，router-view里面又会渲染出带导航栏的页面，相当于再渲染了一次App.vue，我想想好像也是这个道理，点击link之后 router-view里面渲染 点击出来的页面，如果这个页面是谁的子页面，那就连带父集一起渲染了，但是这样的逻辑，反正我又晕了。。。

如何才能解决这个问题呢？
我看了别人的实例，他们是这样定义的

App.vue里面只有一个router view

<template>
<router-view></router-view>
</template>

然后 将默认页面指向了一个带导航条的页面，页面里面 也有一个router-view
点击导航条，下方就会切换到对应的子页面。。。。

const routers = [{
  path: '/',
  component: require('../views/top_menu.vue'),
  children:[
    {
      path: '/',
      component:require('../views/singleAudio.vue')
    },

    {
      path: '/multi',
      component:require('../views/multi_audio.vue')

    },

    {
      path: '/manageApp',
      component:require('../views/multi_audio.vue')
    },

    {
      path: '/ManageConfig',
      component :require('../views/singleAudio.vue')
    },
    {
      path: '/publishApp',
      component:require('../views/singleAudio.vue')
    },

    {
      path: '/threat-perception',
      name: 'threat-perception',
      component :require('../views/singleAudio.vue')
    }
    ]
}

]

大概设置如图，但是我觉得跟我的差不多啊。。。。。、为啥他的就不会出现我那种重复渲染的现象。。。。。
求大神，解答疑惑，谢谢了%>_<%

Answer 1

不要用 children，children 是在当前 router-view 里面的 router-view 渲染