vue-router问题

Question

问题描述：有没有办法一个 router-link 对应一个 router-view

<div id="app">
  <p>
    <router-link to="/user/foo">/user/foo</router-link>
    
    <router-link to="/user/bar">/user/bar</router-link>
  </p>
<!-- 只显示 /user/foo -->
  <router-view></router-view>

<!-- 只显示 /user/bar -->  
  <router-view></router-view>
</div>

链接描述

Answer 1

命名视图了解下？ vue-router命名视图
但不适用你例子的情况，你例子里本质上就是一个同一个组件不同参数而已，虽然可以通过这样写来实现

  <router-view v-if="$route.param.id === 'foo'"></router-view>
  <router-view v-if="$route.param.id === 'bar'"></router-view>

但感觉实现起来根本没有意义

Answer 2

补充：
看了一下你提供的具体代码，发现你的foo bar已是param 了,哪就判断 $route.params.id 就可以了
如果有多个路由需要判断 用不同的router-view来载入，可以在定义如由的时候 ，定义一个meta参数（如果少的话，直接判断路由名就可以）

path: '/user/foo',
                        name: 'foo',
                        component: foo,
                        meta: {
                            showview: 'left' //随变定义，可以判断就可以
                        }
                        
                        然后
                        
                        <router-view v-if="$route.meta.showview=='left'"></router-view>


                        <router-view v-if="$route.meta.showview=='right'"></router-view>