vue实现左方导航栏，要求：父节点点击后下拉出子节点，并且父节点带有左图标，右边图标是上下标志以及自身颜色变蓝。子节点有多个，每个点击后右方出现相应的页面，并且自身颜色变蓝

实现这个效果可以使用Vue的组件化思想，将父节点和子节点分别封装成组件。具体实现步骤如下：

1. 创建一个父组件，用于渲染左侧导航栏，并定义一个数组用于存放导航栏的数据，包括父节点和子节点的信息。父节点信息包括名称、图标和子节点信息，子节点信息包括名称和路由。

2. 在父组件中使用v-for遍历导航栏数据，渲染出父节点和子节点，父节点需要绑定一个点击事件，用于展开和收起子节点。

3. 在子组件中，使用props接收父组件传递的数据，包括子节点名称和路由。在子节点上绑定点击事件，用于切换页面，并且在点击后改变自身的颜色。

4. 在父组件中使用计算属性来判断当前父节点是否展开，用于控制子节点的显示和隐藏，并且在父节点点击后改变右侧箭头的方向。

5. 最后，在子组件中使用$router.push方法实现路由跳转。

具体实现代码可以参考下面的示例：

<!-- 父组件 -->
<template>
  <div class="nav">
    <div v-for="(item, index) in navList" :key="index">
      <div class="parent" @click="toggle(index)" :class="{active: isActive(index)}">
        <img :src="item.icon"/>
        <span>{{item.name}}</span>
        <i class="iconfont" :class="{'icon-arrow-up': isActive(index), 'icon-arrow-down': !isActive(index)}"></i>
      </div>
      <div class="child" v-show="isActive(index)">
        <div v-for="(child, cIndex) in item.children" :key="cIndex" @click="goto(child.route)" :class="{active: activeRoute === child.route}">
          <span>{{child.name}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        {
          name: '父节点1',
          icon: '父节点1的图标',
          children: [
            {
              name: '子节点1',
              route: '/child1'
            },
            {
              name: '子节点2',
              route: '/child2'
            }
          ]
        },
        {
          name: '父节点2',
          icon: '父节点2的图标',
          children: [
            {
              name: '子节点3',
              route: '/child3'
            },
            {
              name: '子节点4',
              route: '/child4'
            }
          ]
        }
      ]
    }
  },
  computed: {
    activeRoute() {
      return this.$route.path
    }
  },
  methods: {
    toggle(index) {
      this.$set(this.navList[index], 'expanded', !this.navList[index].expanded)
    },
    isActive(index) {
      return this.navList[index].expanded
    },
    goto(route) {
      this.$router.push(route)
    }
  }
}
</script>

<style>
.parent {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}
.parent.active {
  background-color: #ccc;
}
.parent img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.child {
  padding-left: 30px;
  display: none;
}
.child.active {
  display: block;
}
.child div {
  padding: 10px;
  cursor: pointer;
}
.child div.active {
  background-color: #ccc;
}
</style>

<!-- 子组件 -->
<template>
  <div class="child" @click="goto" :class="{active: isActive}">
    <span>{{name}}</span>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    },
    route: {
      type: String,
      required: true
    }
  },
  computed: {
    isActive() {
      return this.$route.path === this.route
    }
  },
  methods: {
    goto() {
      this.$router.push(this.route)
    }
  }
}
</script>

<style>
.child {
  padding: 10px;
  cursor: pointer;
}
.child.active {
  background-color: #ccc;
}
</style>