element-vue3-admin用router.push跳转新页面并刷新新页面

大叔是90后大叔2024-06-23 20:39

element-vue3-admin用router.push跳转新页面并刷新新页面

方法一：使用key属性强制刷新

在router-view上使用key属性，并绑定一个响应式的变量，每次跳转时更新这个变量的值，这样router-view会因为key的变化而重新渲染组件。

比如：从add.vue 页面跳转index.vue页面。

1.首先在invex.vue页面加上router-view标签对

html 复制代码

<router-view :key="componentKey"></router-view>

2.然后在add.vue页面加入如下代码

javascript 复制代码

<script lang="ts">
import { ref } from 'vue';
import router from "/@/router";
 
export default {
  setup() {
    const componentKey = ref(0);
 
    function refreshPage() {
      componentKey.value++;
    }
 
    function locateToPage() {
      router.push('/product/list').then(() => {
        refreshPage();
      });
    }
 
    return { locateToPage };
  },
};
</script>

方法二：使用location.reload()

在add.vue页面加入location.reload()强制浏览器刷新整个页面

javascript 复制代码

<script lang="ts">
import router from "/@/router";

function locateToPageAndRefresh() {
  router.push('/product/list').then(() => {
    window.location.reload();
  });
}
</script>

location.reload()强制刷新整个页面可能会导致用户数据丢失，请谨慎使用！