1.在About.vue页面添加子路由链接

注意：这里需要加斜杠

 <router-link to="/about/tab1">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>
    <hr/>

2.添加子级路由占位符

    <!-- 子级路由占位符 -->
    <router-view></router-view>

3.index.js导入组件

import Tab1 from ‘../components/tabs/Tab1.vue‘
import Tab2 from ‘../components/tabs/Tab2.vue‘

4.index.js定义子路由规则

const router = new VueRouter({
    routes: [
      {path:‘/‘,redirect:‘/home‘},
        { path: ‘/about‘, component: About, children: [
          // 这里的path可以加斜线，但官网不建议加
           {path:‘tab1‘,component:Tab1},
            {path:‘tab2‘,component:Tab2}
        ] },
    ]
})

Router子路由