vue-router——嵌套路由

嵌套路由在实际开发中应用还是挺多的，一般是一个路由页里边包含一个路由至多个路由页。实际场景一般是上边固定不变，下边导航切换。

嵌套路由配置：

在对应的路由页下，使用children进行嵌套路由配置，跟routes配置一样。

// router.js 
// 在对应的路由页中使用children配置
const router = new VueRouter({
    routes:[
        {
          path:'/bar',
          component:Bar,
          children:[
            {
               // 组件routerChild会被渲染在bar组件的router-view中
               path:'/bar/child', //或者直接写成 child 相当于 '/bar/child'
               component:routerChild,
            }
          ]
        },

 

使用嵌套路由注意点：

1、从一个路由组件切换到另一个路由组件，之前的组件是直接销毁，如果之前组件嵌套子路由，销毁的顺序是：父级组件先销毁-----嵌套的子组件销毁--------嵌套在子组件的组件销毁 ··· ···

2、vue中总会把  /xxx  作为一级路由，所以在子路由中，如果加  / ,会当成一级路由。这点要明白。