为什么我的路由器链接标签不能与我的引导框架一起使用？答案

【问题标题】：Why is my router-link tag not working with my bootstrap framework?为什么我的路由器链接标签不能与我的引导框架一起使用？
【发布时间】：2017-11-27 11:29:20
【问题描述】：

我正在使用 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>

components文件夹有导航组件

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

标签： vue.js vuejs2 vue-router

【解决方案1】：

你需要像这样将你的路由器实例传递给你的主 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
})

【讨论】：