vue删除以及缓存问题

139 阅读1分钟

编写删除接口:

export const userDelete = (path='')=> httpServe({path,method:'delete'});

添加删除按钮,点击按钮把一行的数据传递给删除方法,起名字不要起delete 因为是js保留字

 <el-table-column>
        <template slot-scope="scope">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="del(scope.row)"
          ></el-button>
        </template>
      </el-table-column>

使用async和await来实现写法是同步 的删除功能:

async del(row) {
      try {
        let {
          data: {
            meta: { msg, status },
          },
        } = await userDelete("users/" + row.id);
        if (status == 200) {
          this.$message.success(msg);
          this.getTableDate();
        } else {
          this.$message.error(msg);
        }
      } catch (err) {
        this.$message.error(err);
      }
    },

增加keepAlive标签:

 /* 循环路由数组 动态添加路由 */
            arrRoute.forEach((v) => {
                v.children.forEach((r) => {
                    this.$router.addRoute("index", {
                        path: r.path,
                        name: r.path,
                        meta: {
                            title: v.authName,
                            subTitle: r.authName,
                            keepAlive: r.authName=='商品列表'?false:true
                        },
  <!--router-view 显示主页面内容  -->
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive"></router-view>