vue页面的展示以及传值

• 路由

  import Vue from 'vue'
  import Router from 'vue-router'
  import book from '@/components/Book'
  
  Vue.use(Router)
  
  export default new Router({
    routes: [
      {
        path: '/book',
        name: 'book',
        component: book
      }
    ]
  })
  

• 代码

  <template>
      <div id='book'>
          <h2>图书的展示</h2>
          <table class="tabx">
              <tr>
                  <td>图书id</td>
                  <td>图书名称</td>
                  <td>图书价格</td>
                  <td>图书分类</td>
                  <td>操作</td>
              </tr>
  
              <tr v-for="i in books">
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td>
                      <button @click="delx(i.id)">删除</button>
                  </td>
              </tr>
          </table>
      </div>
  </template>
  <script>
  export default {
      name:'book',
      data() {
          return {
              books:[],
          }
      },
      mounted(){
          // 获取分类的数据数组
          this.axios({
              url:'/api/app03/book/',
              method:'get'
          }).then(res=>{
              this.books = res.data.data;
          })
      },
      methods:{
          //删除
          delx:function(id){
              this.axios({
                  url:'/api/app01/cate/',
                  method:'delete',
                  data:{"id":id}
              }).then(res=>{
                  if(res.data.status==300){
                      thins.$router.push({
                          name:'login'
                      })
                  }
                  if(res.data.status==200){
                      this.axios({
                          url:'/api/app01/cate/',
                          method:'get'
                      }).then(res=>{
                          this.cates = res.data.data.cates;
                          this.pages = res.data.data.pages;
                      })
                  }else{
                      alert(res.data.msg);
                  }
              })
          }
      }
  }
  </script>
  <style  scoped>
  .tabx{
      margin:0 auto;
  }
  </style>