VUE+Element UI 路由嵌套子路由

一、在index.js中，引入子路由，子路由不需要加 斜杠

{
    path: '/Aboutus',
    name: '关于我们',
    component:Aboutus,
    children:[
     
      {
        path:'company',
        name:'公司介绍',
        component:()=>import("../views/about/company.vue")
      },
      {
        path:'contact',
        name:"联系我们",
        component:()=>import("../views/about/contact.vue")
      },
      {
        path:'news',
        name:"新闻中心",
        component:()=>import("../views/about/news.vue")
      },
      {
        path:"newsContent",
        component:()=>import("../views/about/newsContent.vue")
      }
    ]
  },
  

二、引用element ui框架，子路由跳转页面，只改变子页面的内容，不改变全部页面内容，路由前面需要加父路由path

 <div class="aboutUs_tabs">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" router>
          <el-menu-item index="/Aboutus/company">公司介绍</el-menu-item>
          <el-menu-item index="/Aboutus/contact">联系我们</el-menu-item>
          <el-menu-item index="/Aboutus/news">新闻中心</el-menu-item>
        </el-menu>
        <router-view />
      </div>

三、点击tabs栏，一进入就显示第一个子路由，需要在data里设置显示的index

image.png

四、页面两个路由，同时显示，app.vue里的路由标签需要加上子路由

image.png
image.png
image.png