我想写一个页面类似于wiki词条的详情页面页面左边是一个目录右边是词条的主要内容如何用vue实现？

要实现类似于wiki词条的详情页面，可以使用Vue框架来构建页面。下面是一个简单的示例，演示了如何使用Vue实现目录和内容部分的联动。

<template>
  <div class="wiki-page">
    <div class="sidebar">
      <ul>
        <li v-for="(item, index) in directory" :key="index" @click="selectItem(index)" :class="{ active: activeIndex === index }">
          {{ item.title }}
        </li>
      </ul>
    </div>
    <div class="content">
      <h1>{{ activeItem.title }}</h1>
      <p>{{ activeItem.content }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      directory: [
        { title: '词条1', content: '词条1的内容' },
        { title: '词条2', content: '词条2的内容' },
        { title: '词条3', content: '词条3的内容' },
      ],
      activeIndex: 0,
    };
  },
  computed: {
    activeItem() {
      return this.directory[this.activeIndex];
    },
  },
  methods: {
    selectItem(index) {
      this.activeIndex = index;
    },
  },
};
</script>

<style>
.sidebar {
  float: left;
  width: 20%;
}

.content {
  float: left;
  width: 80%;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  cursor: pointer;
  padding: 5px;
}

.sidebar li.active {
  background-color: #f0f0f0;
}

.content h1 {
  font-size: 24px;
}

.content p {
  font-size: 16px;
}
</style>

在上述示例中，使用了Vue的响应式数据和计算属性来实现目录和内容之间的联动。directory数组存储了词条的标题和内容，activeIndex表示当前选中的词条索引。在目录部分使用v-for指令遍历目录数组，使用@click指令绑定点击事件，点击时更新activeIndex的值。在内容部分，使用计算属性activeItem获取当前选中的词条对象，并将其标题和内容展示出来。

需要注意的是，上述示例只是一个简单的示范，实际开发中还需要根据实际需求进行扩展和优化