router-view 無效 組件不跳轉

最近作一個項目 設置好路由之後組件就是不跳轉並且不報錯 結果找了好半天
最後發現是VueRouter的routes屬性被我敲成了 routersvue

// 錯誤代碼
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>
相關文章
相關標籤/搜索