使用router.view单击时显示component.vue文件的选项卡项

Question

我在左侧和右侧都有一个选项卡结构，我希望设置路由器视图，以便在单击选项卡项目时显示组件，我们如何使用简单的vuejs来做到这一点。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div class="container">
<div class="tabs">
    <ul v-for="(item,key) in items" :key="id">
      <router-view :to="option.title">
      <li @click="onTabChange(option.id)">{{option.title}}</li>
      </router-view>
    </ul>
    </div>
    <div class="tab-content">
      <div v-for="(option,key) in settings" :key="key">
          <div  v-if="option.id == selectedTab" >
            <router-view></router-view>
          </div>
        </div>
    </div>
</div>
</template>