為什么我點每個選項時頁面就跳轉(zhuǎn)過去了呢 而不是在當(dāng)前頁面的右邊顯示出來相關(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>