用vue组件+vue路由+vuex+axios实现增删改查功能

好的，这里给您提供一个简单的示例代码，供参考。

首先，需要安装 Vue、Vue Router、Vuex 和 Axios：

npm install vue vue-router vuex axios --save

接下来，我们创建一个 Vue 组件，用于展示数据，例如 `List.vue`：

<template>
  <div>
    <h1>列表</h1>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>
            <button @click="edit(item)">编辑</button>
            <button @click="remove(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <button @click="add">新增</button>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['list'])
  },
  methods: {
    ...mapActions(['getList', 'removeItem']),
    add() {
      // 跳转到新增页面
      this.$router.push('/add')
    },
    edit(item) {
      // 跳转到编辑页面，并传递参数
      this.$router.push({
        name: 'edit',
        params: {
          id: item.id,
          name: item.name,
          age: item.age
        }
      })
    },
    remove(id) {
      // 删除数据
      this.removeItem(id).then(() => {
        // 刷新列表
        this.getList()
      })
    }
  },
  created() {
    // 获取数据
    this.getList()
  }
}
</script>

然后，创建一个用于添加数据的页面，例如 `Add.vue`：

<template>
  <div>
    <h1>新增</h1>
    <form @submit.prevent="submit">
      <div>
        <label>姓名：</label>
        <input type="text" v-model="name" required>
      </div>
      <div>
        <label>年龄：</label>
        <input type="number" v-model="age" required>
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      name: '',
      age: ''
    }
  },
  methods: {
    ...mapActions(['addItem']),
    submit() {
      // 提交数据
      this.addItem({
        name: this.name,
        age: this.age
      }).then(() => {
        // 跳转到列表页面
        this.$router.push('/')
      })
    }
  }
}
</script>

接下来，创建一个用于编辑数据的页面，例如 `Edit.vue`：

<template>
  <div>
    <h1>编辑</h1>
    <form @submit.prevent="submit">
      <div>
        <label>姓名：</label>
        <input type="text" v-model="name" required>
      </div>
      <div>
        <label>年龄：</label>
        <input type="number" v-model="age" required>
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      id: '',
      name: '',
      age: ''
    }
  },
  methods: {
    ...mapActions(['updateItem']),
    submit() {
      // 提交数据
      this.updateItem({
        id: this.id,
        name: this.name,
        age: this.age
      }).then(() => {
        // 跳转到列表页面
        this.$router.push('/')
      })
    }
  },
  created() {
    // 获取参数
    const { id, name, age } = this.$route.params
    this.id = id
    this.name = name
    this.age = age
  }
}
</script>

最后，创建一个 Vuex store，用于管理数据，例如 `store.js`：

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    list: []
  },
  mutations: {
    setList(state, list) {
      state.list = list
    },
    addItem(state, item) {
      state.list.push(item)
    },
    removeItem(state, id) {
      state.list = state.list.filter(item => item.id !== id)
    },
    updateItem(state, item) {
      const index = state.list.findIndex(item => item.id === item.id)
      if (index !== -1) {
        state.list.splice(index, 1, item)
      }
    }
  },
  actions: {
    getList({ commit }) {
      return axios.get('/api/list').then(response => {
        commit('setList', response.data)
      })
    },
    addItem({ commit }, item) {
      return axios.post('/api/add', item).then(response => {
        commit('addItem', response.data)
      })
    },
    removeItem({ commit }, id) {
      return axios.delete(`/api/remove/${id}`).then(() => {
        commit('removeItem', id)
      })
    },
    updateItem({ commit }, item) {
      return axios.put(`/api/update/${item.id}`, item).then(() => {
        commit('updateItem', item)
      })
    }
  },
  getters: {
    list: state => state.list
  }
})

其中，`getList`、`addItem`、`removeItem` 和 `updateItem` 方法分别用于获取列表、添加数据、删除数据和更新数据。

最后，我们还需要配置 Vue Router，例如 `router.js`：

import Vue from 'vue'
import VueRouter from 'vue-router'
import List from './List.vue'
import Add from './Add.vue'
import Edit from './Edit.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: List },
  { path: '/add', component: Add },
  { path: '/edit/:id/:name/:age', name: 'edit', component: Edit }
]

export default new VueRouter({
  routes
})

至此，我们就完成了一个简单的增删改查功能。需要注意的是，此示例未考虑到数据校验、错误处理等问题，仅供参考。