vue 书籍添加修改删除页面

对于Vue的书籍添加修改删除页面，可以使用Vue Router和Vue组件来实现。

首先，在Vue项目中安装Vue Router：

npm install vue-router --save

然后，在项目中创建一个`router.js`文件，用于配置路由：

import Vue from 'vue'
import Router from 'vue-router'
import BookList from '@/components/BookList'
import AddBook from '@/components/AddBook'
import EditBook from '@/components/EditBook'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'BookList',
      component: BookList
    },
    {
      path: '/add',
      name: 'AddBook',
      component: AddBook
    },
    {
      path: '/edit/:id',
      name: 'EditBook',
      component: EditBook
    }
  ]
})

在这个文件中，我们定义了三个路由：`/`路径对应的是书籍列表页面（`BookList`组件），`/add`路径对应的是添加书籍页面（`AddBook`组件），`/edit/:id`路径对应的是编辑书籍页面（`EditBook`组件）。

然后，在`App.vue`的模板中添加路由的出口：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

这样，当访问不同的路径时，就会自动加载对应的组件。

下面，我们可以开始编写书籍列表、添加书籍、编辑书籍的组件了。

对于书籍列表组件，可以使用以下代码：

<template>
  <div>
    <h2>书籍列表</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>书名</th>
          <th>作者</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="book in books" :key="book.id">
          <td>{{ book.id }}</td>
          <td>{{ book.title }}</td>
          <td>{{ book.author }}</td>
          <td>
            <router-link :to="'/edit/' + book.id">编辑</router-link>
            <button @click="deleteBook(book.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <router-link to="/add">添加书籍</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [
        { id: 1, title: 'Vue.js实战', author: '张三' },
        { id: 2, title: 'React实战', author: '李四' },
        { id: 3, title: 'Angular实战', author: '王五' }
      ]
    }
  },
  methods: {
    deleteBook(id) {
      this.books = this.books.filter(book => book.id !== id)
    }
  }
}
</script>

这个组件中，我们使用了`v-for`指令遍历书籍列表，同时使用了`router-link`组件来实现跳转到编辑书籍页面和添加书籍页面的操作。还定义了一个`deleteBook`方法，用于删除书籍。

对于添加书籍页面，可以使用以下代码：

<template>
  <div>
    <h2>添加书籍</h2>
    <form>
      <label>
        书名：<input type="text" v-model="title">
      </label>
      <br>
      <label>
        作者：<input type="text" v-model="author">
      </label>
      <br>
      <button type="button" @click="addBook">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      author: ''
    }
  },
  methods: {
    addBook() {
      const book = {
        id: Date.now(),
        title: this.title,
        author: this.author
      }
      this.$emit('add', book)
      this.title = ''
      this.author = ''
    }
  }
}
</script>

在这个组件中，我们使用了`v-model`指令绑定了输入框的值，使用了`$emit`方法向父组件传递添加书籍的事件。

最后，是编辑书籍页面：

<template>
  <div>
    <h2>编辑书籍</h2>
    <form>
      <label>
        书名：<input type="text" v-model="book.title">
      </label>
      <br>
      <label>
        作者：<input type="text" v-model="book.author">
      </label>
      <br>
      <button type="button" @click="updateBook">保存</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      book: {}
    }
  },
  created() {
    const id = this.$route.params.id
    this.book = this.$parent.books.find(book => book.id === Number(id))
  },
  methods: {
    updateBook() {
      this.$emit('update', this.book)
    }
  }
}
</script>

在这个组件中，我们使用了`$route`对象获取了路由参数中的书籍ID，然后使用了`find`方法查找对应的书籍信息，并将其绑定到了输入框中，使用了`$emit`方法向父组件传递更新书籍的事件。

最后，在父组件中，我们可以使用以下代码来实现添加、更新和删除书籍的操作：

<template>
  <div>
    <router-view
      @add="addBook"
      @update="updateBook"
      :books="books"
    ></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [
        { id: 1, title: 'Vue.js实战', author: '张三' },
        { id: 2, title: 'React实战', author: '李四' },
        { id: 3, title: 'Angular实战', author: '王五' }
      ]
    }
  },
  methods: {
    addBook(book) {
      this.books.push(book)
    },
    updateBook(book) {
      const index = this.books.findIndex(b => b.id === book.id)
      this.books.splice(index, 1, book)
    }
  }
}
</script>

在这个组件中，我们使用了`router-view`组件来显示子组件，使用了`@add`和`@update`事件监听子组件的添加和更新书籍操作，并在方法中更新书籍列表。同时，在书籍列表组件中使用了`deleteBook`方法来删除书籍。