多个router-view如何只修改一个。

Question

大概是这么布局的，要实现的是点击左边1，2，3，4改变左侧树的内容，但是页面不变；点击菜单栏页面改变，左侧树不变。

Answer 1

这个使用vue很容易实现。只是因为题主的需求不明朗。有两个问题：
1、菜单栏和1,2,3,4有没有关系？
2、左侧树和页面有没有什么关系？
鉴于目前的需求，可以这样设计页面
menuBar.vue 顶部菜单栏组件
leftBar.vue 左侧1,2，3,4按钮栏组件，里面载入左侧树组件
navItem.vue 左侧树内容组件
pageView.vue 页面内容
index.vue 首页组件

menuBar.vue

<template>
<div>
    <ul>
        <li><a href="">菜单1</a></li>
        <li><a href="">菜单2</a></li>
        <li><a href="">菜单3</a></li>
    </ul>
</div>
</template>

leftBar.vue

<template>
<div>
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
    </ul>
    
    <nav-item :treeData="treeData"></nav-item>
    
</div>
</template>

navItem.vue

<template>
<el-tree 
    :data="treeData" 
    :props="defaultProps" 
    @node-click="handleNodeClick">
</el-tree>
</template>

pageView.vue：

<template>
<keep-alive >
    <router-view></router-view>
</keep-alive>
</template>

index.vue

<template>
<div>
    <menu-bar></menu-bar>
    <left-bar></left-bar>
    <div class="sys-section">
      <div class="sys-main">
        <page-view></page-view>
      </div>
    </div>
</div>
</template>