vue项目请求后页面刷新
简单的项目 大致思路
- 打开此页面 即刷新从后台调取数据 并渲染到列表 gethero()放在勾子函数created中可以实现
- 页面数据调整格式或样式 过滤器
- 当实行删除需求后 页面一般需要更新数据 可以使用网上方法 监听路由(并不是次次都行的样子)
//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>