vue這個(gè)路由為什么顯示不出來(lái)右邊的組件呢？

為什么我點(diǎn)每個(gè)選項(xiàng)時(shí)頁(yè)面就跳轉(zhuǎn)過(guò)去了呢 而不是在當(dāng)前頁(yè)面的右邊顯示出來(lái)相關(guān)的組件 這是為什么？

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import Product from '@/components/Product'
import Work from '@/components/Work'
import Contact from '@/components/Contact'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    },
    {
      path: '/product',
      name: 'Product',
      component: Product
    },
    {
      path: '/work',
      name: 'Work',
      component: Work
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    }
  ]
})

index.vue

<template>
  <div>
  <div id="left">
    <router-link class="list-group-item  router-link-active" to="/product">product</router-link>
    <router-link class="list-group-item" to="/work">work</router-link>
    <router-link class="list-group-item" to="/contact">contact</router-link>
  </div>
  <div id="right">
    <router-view></router-view>
  </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data () {
  }
}
</script>

<style scoped>
</style>