vue+elementui实现点击顶部导航栏显示对应的侧边栏，再点击侧边栏的某一项显示对应的页面，点击时路径不发生改变，并且所有数据来自后端，用代码实现

这个功能可以通过使用 Vue Router 和动态生成路由实现。以下是一个基本的示例代码：

1. 在路由配置中定义顶部导航栏和侧边栏的路由：

const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '',
        component: Home,
        meta: { title: '首页' }
      },
      {
        path: '/article',
        component: Article,
        meta: { title: '文章' }
      },
      {
        path: '/user',
        component: User,
        meta: { title: '用户' }
      }
    ]
  }
];

2. 在顶部导航栏组件中循环渲染路由：

<el-menu mode="horizontal" @select="handleMenuSelect">
  <el-menu-item v-for="route in routes" :key="route.path" :index="route.path">{{ route.meta.title }}</el-menu-item>
</el-menu>

data() {
  return {
    routes: []
  };
},
created() {
  // 获取后端返回的路由列表
  api.getRoutes().then(routes => {
    this.routes = routes;
  });
},
methods: {
  handleMenuSelect(index) {
    // 根据路由跳转到对应的页面
    this.$router.push(index);
  }
}

3. 在侧边栏组件中动态生成路由：

<el-menu class="el-menu-vertical" :default-openeds="[activeIndex]" @select="handleMenuSelect">
  <el-submenu v-for="nav in navs" :key="nav.path" :index="nav.path">
    <template slot="title">{{ nav.name }}</template>
    <el-menu-item v-for="child in nav.children" :key="child.path" :index="child.path">{{ child.name }}</el-menu-item>
  </el-submenu>
</el-menu>

data() {
  return {
    navs: [],
    activeIndex: ''
  };
},
created() {
  // 获取后端返回的侧边栏菜单列表
  api.getNavs().then(navs => {
    this.navs = navs;
  });

  // 根据当前路由设置默认展开的菜单项
  this.activeIndex = this.$route.matched[1].path;
},
methods: {
  handleMenuSelect(index) {
    // 根据路由跳转到对应的页面
    this.$router.push(index);
  }
},
watch: {
  $route() {
    // 路由改变时更新默认展开的菜单项
    this.activeIndex = this.$route.matched[1].path;
  }
},
computed: {
  // 根据路由动态生成子菜单列表
  currentNav() {
    const currentRoute = this.$route.matched[1];
    return this.navs.find(nav => nav.path === currentRoute.path);
  }
},
beforeRouteEnter(to, from, next) {
  // 动态添加子路由
  const currentRoute = to.matched[1];
  api.getNavChildren(currentRoute.path).then(children => {
    children.forEach(child => {
      const childRoute = {
        path: child.path,
        component: child.component,
        meta: { title: child.name }
      };
      router.addRoute(currentRoute.path, childRoute);
    });
    next();
  });
}

在这个示例中，我们获取了后端返回的路由和侧边栏菜单列表，并通过循环渲染和动态生成路由来实现了点击顶部导航栏显示对应的侧边栏，再点击侧边栏的某一项显示对应的页面的功能。注意，为了保持路径不发生改变，我们在路由跳转时使用了 `$router.push` 方法而不是 `$router.replace` 方法。同时，在动态生成路由时，我们使用了 Vue Router 提供的 `addRoute` 方法，该方法可以动态添加路由到路由表中。