Vue嵌套路由

1. App.vue里面有router-view,指向最顶层的路由

<div id="app">
  <router-view></router-view>
</div>
2.在router文件里面配置的根目录级别的路由，是顶层路由渲染的组件，被渲染的组件就放在上面router-view的位置， 同样，一个被渲染组件同样可以包含自己的嵌套 <router-view>

<template>

<div class="Common">

<div>

<router-view></router-view>

</div>

</div>

</template>

3. 要想嵌套的出口渲染组件，需要在router配置文件中使用children配置

{

path: "/common", name:"Common",component: Common,

children: [

{

path: "home", name:"default",component: home

}

]

}

注意：以‘/’开头的嵌套路径被当作根路径，根路径后面的嵌套路径没有‘/’

坑：当加载home组件的时候，如果beforecreate等钩函数出现问题，页面元素可能加载不出来