ルータリンクタグがブートストラップフレームワークで動作しないのはなぜですか？

Question

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> 

は、コンポーネントのフォルダには、このdivのセクションが含まれているナビゲーションコンポーネント

<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> 

    </div> 


     </div> 

</template> 


<script> 

export default { 

name : 'navigation' 
    } 

</script> 




<style scoped = "true"> 


</style> 

のために適切に

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

終了タグを働いていないルータ、リンクタグはすべて初期ナビゲーションリンクは、もはや表示されません。これをどうすれば解決できますか？

Answer 1

あなたはそうのようなあなたのメインのVueのインスタンスにルータのインスタンスを渡す必要があります：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 
})