在vue项目中，我使用elementui封装做了顶部横向导航和左侧导航，我怎么让左侧导航根据顶部导航的路径动态显示

可以通过监听路由变化，来动态显示左侧导航的选中状态。具体实现步骤如下：

1. 在顶部导航和左侧导航组件中都引入 vue-router，并在路由配置中设置对应的路径。
2. 在左侧导航组件中，使用 `el-menu` 组件来渲染导航菜单，设置 `default-active` 属性为顶部导航的路径。
3. 在左侧导航组件中，监听路由变化，将当前路由的路径设置为 `el-menu` 的 `default-active` 属性值。

代码示例：

顶部导航组件：

<template>
  <div>
    <el-menu mode="horizontal" @select="handleSelect">
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/about">关于我们</el-menu-item>
      <el-menu-item index="/contact">联系我们</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  methods: {
    handleSelect(index) {
      this.$router.push(index)
    }
  }
}
</script>

左侧导航组件：

<template>
  <div>
    <el-menu default-active="/" class="el-menu-vertical-demo" @select="handleSelect">
      <el-submenu index="/products">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>产品中心</span>
        </template>
        <el-menu-item index="/products/1">产品1</el-menu-item>
        <el-menu-item index="/products/2">产品2</el-menu-item>
        <el-menu-item index="/products/3">产品3</el-menu-item>
      </el-submenu>
      <el-submenu index="/news">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>新闻动态</span>
        </template>
        <el-menu-item index="/news/1">新闻1</el-menu-item>
        <el-menu-item index="/news/2">新闻2</el-menu-item>
        <el-menu-item index="/news/3">新闻3</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  computed: {
    defaultActive() {
      return this.$route.path
    }
  },
  methods: {
    handleSelect(index) {
      this.$router.push(index)
    }
  },
  watch: {
    '$route.path'(newVal) {
      this.$nextTick(() => {
        this.$refs.menu && (this.$refs.menu.defaultActive = newVal)
      })
    }
  }
}
</script>