嵌套路由规则

嵌套路由也是vue-router的常见用法

嵌套路由

通过路由实现组件的嵌套展示，叫做嵌套路由

router-view占位符

 <!-- 只要在项目中安装和配置了 vue-router，就可以使用 router-view 这个组件了 -->
    <!-- 它的作用很单纯：占位符 -->
    <router-view></router-view>

通过children属性声明子路由规则

在src/router/index.js路由模块中，导入需要的组件，并使用children属性声明子路由规则：(注意父路由的pathj加’/‘,子路由的path不加’/‘)
举例给’/about‘加子路由

const router = new VueRouter({
routes:[
{
      path: '/about',
      component: About,
     
      // redirect: '/about/tab1',有默认子路由就不用再设置重定向了
      children: [
        // 子路由规则
        // 默认子路由：如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做“默认子路由”
        { path: '', component: Tab1 },
        { path: 'tab2', component: Tab2 }
      ]
    },
]
})

注意：一定要保证path地址和路由连接到地址保持一致