Vue3中切换路由页面不展示内容，刷新后页面正常显示

解决办法：给路由添加key

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
    <RouterView v-slot="{ Component }">
      <transition name="el-fade-in" >
        <keep-alive>
          <component :is="Component" :key="key" />
        </keep-alive>
      </transition>
    </RouterView>
</template>

<script lang="ts" setup>
import { useRoute, RouterView } from 'vue-router'

import { computed } from "vue";
 
// 路由中添加key解决切换路由时页面不展示内容，刷新后才展示内容问题
const route = useRoute();
const key = computed(() => {
  return route.path + Math.random();
});
</script>

Vue中重新渲染组件

有时Vue的反应性系统还不够，需要重新渲染组件页面。

重新渲染组件有以下几个办法：

  • 重新加载整个页面
  • 使用v-if
  • 使用Vue的内置forceUpdate方法
  • 在组件上进行key更改

前面两种方法暂时不建议做，这里讨论一些后面两种方法

使用forceUpdate

$forceUpdate具有强制刷新的作用，在vue框架中，如果data中有一个变量:age，修改他，页面会自动更新。但如果data中的变量为数组或对象，我们直接去给某个对象或数组添加属性，页面是识别不到的。

1
2
3
4
5
6
7
8
9
10
11
12
<script>
  data(){
    return{
      userInfo:{name:'小明'}
    }
  },
  methods:{
    updateName(){
      this.userInfo.name='小红'
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
<script>
  data(){
    return{
      A:{name:'Alive'}
    }
  },
  methods:{
    updateA(){
      this.A.name='Seven'
    }
  }
</script>

在updateA函数中，我们尝试给A对象修改值，发现页面其实并没有变化。看看解决方法

方法一：

1
2
3
4
5
6
7
methods:{
  updateA(){
    this.A.name='Seven';//在此时，确实已经将A对象修改完成
    console.log(this.A.name);//输出结果: Seven
    this.$forceUpdate();//在这里，强制刷新之后，页面的结果变为'小红'
  }
}

方法二：

1
2
3
4
5
methods:{
  updateA(){
    this.$set('A',name,'Seven');
  }
}

修改组件的key达到组件重新渲染

这种方法是最好的，：key=‘’（此处可触发watch和update）（最优方法）

给要重新渲染的组件提供一个key属性，如果key保持不变，则不会更改组件，但是如果key发生更改，Vue 就会重新渲染属性。

1
2
3
4
<div :key="reload">
    {{this.message}}
    <v-btn @click='Rerender'>change</v-btn>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default {
  data() {
    return {
      reload: 0,
      message: '旧消息'
    };
  },
  methods: {
    Rerender() {
      this.message = '新消息'
      this.reload += 1;  // 改变reload，达到重新渲染
    }
  }
}

Rerender()被调用时，reload改变。此时，Vue将销毁组件并创建一个新组件。我们得到的是一个子组件，它将重新初始化自身并“重置”其状态。

刷新整个页面（最不推荐

1、reload 2、this.$router.go(0)