router-view 无效 组件不跳转

最近做一个项目 设置好路由以后组件就是不跳转而且不报错 结果找了好半天
最后发现是VueRouter的routes属性被我敲成了 routers

// 错误代码
const router = new VueRouter({
  mode: 'history',
  routers
})


// 改正后
const router = new VueRouter({
  mode: 'history',
  routes
})

容器页面部分

 <template>
  <div >
     <v-header></v-header>

     <div class="tab">
       <router-link class="tab-item" to='goods'>商品</router-link>
       <router-link class="tab-item" to='ratings'>评论</router-link>
       <router-link class="tab-item" to='sell'>商家</router-link>
     </div>

     <div class="content">
       <router-view></router-view>
     </div>
  </div>
</template>
<script>
  import header from './components/header/header.vue'

  export default {
      components: {
          'v-header': header
      }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">

    .tab
        display:flex
        width: 100%
        height: 40px;
        line-height: 40px;
        .tab-item
           flex:1
           text-align: center

</style>





posted @ 2017-04-06 11:59  wkm-wangZhe  阅读(6156)  评论(0编辑  收藏  举报