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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
this.$router.push 当前页面刷新的解决方式有以下几种: 1. 使用router.replace()方法代替this.$router.push()方法,这样可以实现跳转但不刷新页面。 ```javascript this.$router.replace('/path') ``` 2. 在this.$router.push()方法中添加一个随机参数,例如时间戳,以确保每次跳转都是一个新的URL,从而达到不刷新页面的效果。 ```javascript this.$router.push({ path: '/path', query: { timestamp: new Date().getTime() } }) ``` 3. 使用this.$router.go(0)方法刷新当前页面,该方法会重新加载当前页面,实现页面刷新的效果。 ```javascript this.$router.go(0) ``` 4. 在router-view组件上添加一个唯一的key属性,当路由发生变化时,key属性的变化会导致组件重新渲染,从而实现页面刷新的效果。 ```html <router-view :key="$route.fullPath"></router-view> ``` 5. 使用watch监听$route对象的变化,当路由发生变化时,执行相应的操作,例如重新获取数据或刷新页面。 ```javascript watch: { $route(to, from) { // 执行相应的操作 } } ``` 6. 使用beforeRouteUpdate钩子函数,在路由更新之前执行相应的操作,例如重新获取数据或刷新页面。 ```javascript beforeRouteUpdate(to, from, next) { // 执行相应的操作 next() } ``` 7. 使用activated钩子函数,在组件被激活时执行相应的操作,例如重新获取数据或刷新页面。 ```javascript activated() { // 执行相应的操作 } ``` 8. 使用keep-alive组件将需要保持状态的组件包裹起来,这样在路由切换时,组件的状态会被保留,从而实现页面刷新的效果。 ```html <keep-alive> <router-view></router-view> </keep-alive> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值