首先，要明白，我们所谓的那些页面都是route-view的内容。

我们试想一个场景：A组件中有一个按钮，点击触发路由跳转到B组件，A组件消失，页面上只有B组件。

就这么个简单的问题，如果不仔细的话，确实也是蛮头疼的。因为，你可能使用不好route-view的嵌套关系。

做法:

1.组件App.vue是单文件组件，router-view用来展示页面

<template>

       <router-view></router-view>

</template>

2.定义路由

const routes=[

     {

         path:"/",

         component:Atest

     },

    {

        path:"/headertop",

        component:Btest

    }

]

const router= new VueRouter({

      mode:'history',

      routes

})

3.挂载组件APP,#app是index.html上的节点

new Vue({

      router,

      components:{App},

      template:'<App/>'

}).$mount('#app')

这样子就可以根据路由渲染页面，A组件跳转B组件，可以通过router-link 或者this.$router.push('')实现。

所以，如果是后台的项目，可能会有很多公共的导航，这些导航就写在App组件上就可以了，根据这些导航切换路由，然后渲染的页面展示在router-view里面。