Why does the page jump when I click on each option instead of displaying the relevant components on the right side of the current page?
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>