Vue.js 为什么我的路由器链接标签不能与我的引导框架一起工作？

我正在使用vue.js为前端框架创建导航任务栏和引导

我在创建的router.js文件中配置了路由器

    import Vue from 'vue'
    import Router from 'vue-router'

    Vue.use(Router)

    //enter code here`import components     
    import levi from './containers/levi'
    import product from './containers/product'
    import price from './containers/price'


    //application routes 

    const routes = [
        {path: '/', component: levi },
        {path: '/product', component: product },
        {path:'/price', component: price }
    ]


    //export router instance 

    export default new Router({

        mode: 'history',
        routes,
        linkActiveClass:'is-active'
    })

我用导航栏的文件创建了容器

//price.vue

    <template>
        <div id = "price" >
           What is the price!  
        </div>
    </template>

    <script>  
        export default{
            name: 'price'  
        }
    </script>


    <style scoped>

    </style>

价格是多少！
导出默认值{
名称：“价格”
}

//product.vue

    <template>
       <div id = "product">   
           Understanding the levi product
       </div>

    </template>


    <script>
        export default {
            name: 'product'   
        }
    </script>

    <style scoped>

    </style>

了解levi产品
导出默认值{
名称：“产品”
}

“组件”文件夹包含导航组件

    <template>

            <div>

  <div class = "navbar navbar-default navbar-static-top">

   <div class = "container ">

    <a href = "# " class  = "navbar-brand">levi</a>
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navbar-collapse"
           name = "button" >
    <span class = "navbar-toggle-Menu">Menu</span>
          </button>
    <div class = "collapse navbar-collapse ">

菜单

此div部分包含工作不正常的路由器链接标记

<div class = "nav navbar-nav navbar-right ">
    <router-link to = '/product'>
        product
    </router-link>
       </div>

产品

路由器链接的结束标记

 </div>

   </div>

  </div>


        </div>

</template>


<script>

export default {

name : 'navigation'
    }

</script>




<style scoped = "true">


</style>

导出默认值{
名称：“导航”
}

---

当我用路由器链接包围它们时，所有初始导航链接不再显示。我怎样才能解决这个问题

您需要将路由器实例传递到主Vue实例，如下所示：

//your router is declared as default in its own file so
//in your main Vue instance...

import router from './my_router'
new Vue({
  el: '#app',
  router
})

---

您使用的是哪种版本的vue？