关于vue.js 怎么绑定路由和和

[一个小麻瓜]

RT
我是小白，最近在看vue.js，遇到个问题不能解决想请教下大家。多的不说上正题。
我这边不管点击哪个<router-link>（类似a标签的东西），所有的<router-view>都会渲染该标签的路由
下图：

我想要的是让第一、第二个<router-link>路由渲染在第一个<router-view>中，第三、第四个<router-link>路由渲染在第二个<router-view>中。
请大家指教下，好人一生平安。网上看了不少都没找到答案，官网也只是说<router-view>会将路由匹配到的组件将渲染在这里。
对了放下代码：
app.vue:
<template>
<div id="app">
<div id="">
<img src="./assets/logo.png">
<shiyan></shiyan>
<div id="app1">
<router-link to='RouterTry' class='iclass'>but1</router-link>
<router-link to='first' class='iclass'>but2</router-link>
<router-view class='qwer'></router-view>
</div>
<div id="app2">
<router-link to='sceond' class='iclass'>but3</router-link>
<router-link to='three' class='iclass'>but4</router-link>
<router-view class='qwer'></router-view>
</div>
</div>
</div>
</template>

<script>
import shiyan from '@/components/shiyan.vue'
export default {
name: 'app',
components:{shiyan}

}
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.iclass{font-size: 28px; color: green;}
.qwer{width: 200px; height: 80px; border: solid 2px black;margin: 0 auto;position: relative;}
</style>


index.js:
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

import RouterTry from '@/components/RouterTry.vue'
import first from '@/components/first.vue'
import sceond from '@/components/sceond.vue'
import three from '@/components/three.vue'

Vue.use(Router)

var therouter= new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
},
{
path: '/RouterTry',
name: 'RouterTry',
component: RouterTry
},
{
path: '/first',
name: 'first',
component: first
},
{
path: '/sceond',
name: 'sceond',
component: sceond
},
{
path: '/three',
name: 'three',
component: three
},
]
})
export default therouter

谢谢大家指教，感激不尽

[一个小麻瓜]

@showbo 老哥有空没，求拯救，小弟这问题是有点白痴，但是确实不知道怎么解决，请求助攻一波

[一个小麻瓜]

怎么没人啊，快来人啊，求拯救

[QW168168168]

@三知之灵 你这个不行啊

[三知之灵]

添加name属性 app.vue:

<template>
  <div id="app">
  	<div id="">
  	<img src="./assets/logo.png">
      <shiyan></shiyan>
      <div id="app1">
   	      <router-link to='RouterTry' class='iclass'>but1</router-link>
   	       <router-link to='first' class='iclass'>but2</router-link>
   	       <router-view class='qwer' name="location1"></router-view>
      </div>
      <div id="app2">
      	<router-link to='sceond' class='iclass'>but3</router-link>
   	       <router-link to='three' class='iclass'>but4</router-link>
   	       <router-view class='qwer' name="location2"></router-view>
      </div>
  	</div>
  </div>
</template>

<script>
import shiyan from '@/components/shiyan.vue'
export default   {
  name: 'app',
  components:{shiyan}
  
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.iclass{font-size: 28px; color: green;}
.qwer{width: 200px; height: 80px; border:  solid 2px black;margin: 0 auto;position: relative;}
</style>

index.js:

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

import RouterTry from '@/components/RouterTry.vue'
import first from '@/components/first.vue'
import sceond from '@/components/sceond.vue'
import three from '@/components/three.vue'

Vue.use(Router)

var therouter= new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/RouterTry',
      name: 'RouterTry',
      component: {
          location1:RouterTry
      }
    },
    {
      path: '/first',
      name: 'first',
      component: {
          location1:first
      }
    },
    {
      path: '/sceond',
      name: 'sceond',
      component: {
          location2:sceond
      }
    },
    {
      path: '/three',
      name: 'three',
      component: {
          location2:three
      }
    },
  ]
})
export default therouter