fix: component cannot be rendered due to switch routing

Author: vanoneang

package-lock.json

@@ -19,7 +19,7 @@
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.4",
-    "element-plus": "^1.0.2-beta.55",
+    "element-plus": "^1.0.2-beta.70",
     "event-source-polyfill": "^1.0.7",
     "fastscan": "^1.0.4",
     "good-storage": "^1.1.0",

package.json

@@ -1,7 +1,7 @@
 <template>
   <section class="container">
     <div class="wrapper" id="wrapper">
-      <router-view v-slot="{ Component }">
+      <router-view v-slot="{ Component }" :key="$route.fullPath">
         <transition appear name="fade-transform" mode="out-in">
           <component :is="Component" />
         </transition>

src/component/layout/app-main.vue

@@ -59,20 +59,21 @@
       </el-row>
     </div>
     <!-- 修改头像 -->
-    <!-- <avatar :originalImage="cropImg" :cropVisible="cropVisible" @switchCropVisible="switchCropVisible"></avatar> -->
+    <avatar :originalImage="cropImg" :cropVisible="cropVisible" @switchCropVisible="switchCropVisible"></avatar>
   </div>
 </template>
 
 <script>
+import { mapActions, mapGetters } from 'vuex'
+
 import User from '@/lin/model/user'
 import axios from '@/lin/plugin/axios'
-import { mapActions, mapGetters } from 'vuex'
 import defaultAvatar from '@/assets/image/user/user.png'
-// import Avatar from '../../component/layout/avatar.vue'
+import Avatar from '../../component/layout/avatar.vue'
 
 export default {
   name: 'Center',
-  // components: { Avatar },
+  components: { Avatar },
   data() {
     const oldPassword = (rule, value, callback) => {
       if (!value) {