Question

我正在使用vue.js创建导航任务栏以及前端框架的bootstrap。

我在我创建的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>

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

Answer 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
})

为什么我的router-link标签不能与我的bootstrap框架一起使用？

1 个答案: