this.$router.push当前页面刷新不成功

vue项目请求后页面刷新

简单的项目 大致思路

  1. 打开此页面 即刷新从后台调取数据 并渲染到列表 gethero()放在勾子函数created中可以实现
  2. 页面数据调整格式或样式 过滤器
  3. 当实行删除需求后 页面一般需要更新数据 可以使用网上方法 监听路由(并不是次次都行的样子)
//this.$router.push('home')
//this.$router.push({name:'home'})也有网友举出此例 可行 但是测试并未成功
route  watch:{
    $route(){
      this.gethero();
    }}

4.再次调用函数gethero()
5.抑或是 window.location.href 虽然粗暴 但是实用

  • 大道且艰 那便一去不回
<template>
     <div>
   <router-link to='/hero/add' class="btn btn-primary">添加英雄</router-link>
<table class="table table-striped">
      <thead>
        <tr>
          <th>ID</th>
          <th>英雄名称</th>
          <th>英雄性别</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in hero" :key="item.id">
          <td>{{item.id}}</td>
          <td >{{item.heroName}}</td>
          <td >{{item.gender}}</td>
          <td>{{item.cTime | formatTime}}</td>
          <td>
            <router-link class="btn btn-success"  :to="{name:'hero/edit', params:{id:item.id,myname:item.heroName,gender:item.gender}}" style="margin-right:10px">编辑</router-link>
            <button class="btn btn-danger" @click="delhero(item.id)">删除</button>
          </td>
        </tr>
        <tr v-if="hero.length===0">none</tr>
      </tbody>
    </table>


  </div>
</template>
<script>

import axios from "axios";
import moment from "moment";
export default {
  data() {
    return { hero: [] };
  },
  watch:{
    $route(){
      this.gethero();
    }
  },
  filters: {
    formatTime(v) {
     return moment(new Date(v)).format("YYYY-MM-DD hh:mm:ss");
    }
  },
  created() {
    this.gethero();
  },
  methods: {
    gethero() {
      axios.get("http://localhost:3000/hero").then(res => {
        this.hero = res.data;
      });
    },
    delhero(id) {
      if (confirm("你确定要删除么  ")) {
        axios.delete("http://localhost:3000/hero/" + id).then(res => {
          // console.log("success");
          //this.$router.push('home')
          this.gethero();
        });
      }
    }
  }
};
</script>
<h1></h1>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值