修改：当hash修改的时候，把editor重载一遍

src/store/modules/project.js

@@ -45,15 +45,9 @@ export const projectStore = {
 					Vue.set(localData, 'dataMapping', dataMapping || []);
 				}
 			}else{
-				if (!localData.views) {
-					Vue.set(localData, 'views', []);
-				}
-				if (!localData.assets) {
-					Vue.set(localData, 'assets', []);
-				}
-				if (!localData.dataMapping) {
-					Vue.set(localData, 'dataMapping', []);
-				}
+				Vue.set(localData, 'views', []);
+				Vue.set(localData, 'assets', []);
+				Vue.set(localData, 'dataMapping', []);
 			}
 			// compoleteComponentData(state.data.views);
 		},

src/themes/light/editor.scss

@@ -26,6 +26,7 @@
 
 		.right-part{
 			color: $--color-text-regular;
+			line-height: 15px;
 
 			.el-button{
 				padding: 2px;

src/views/Editor.vue

 <template>
-	<div class="editor">
+	<div class="editor" v-if="ready">
 		<tool-bar @click-menu="clickMenu"/>
 		<split-panes class="pane-container" @resized="onPanesReSized(0, $event)">
 			<split-panes splitpanes-min="40" :splitpanes-size="getSize(0, 0)" horizontal @resized="onPanesReSized(1, $event)">
@@ -45,41 +45,59 @@
 			const panesConfig = localStorage.panesConfig ? JSON.parse(localStorage.panesConfig) : [0.8, 0.8, 0.3];
 			return {
 				panesConfig,
+				ready: false,
+			}
+		},
+		watch: {
+			$route: {
+				handler: function(val, oldVal){
+					console.log('router changed');
+					this.loadProject();
+				},
+				deep: true
 			}
 		},
 		computed: {
 			...mapGetters([]),
 		},
-		async mounted() {
-			const {projectID} = this.$route.params;
-			if (await this.localVersionExist(projectID)) {
-				this.$confirm(this.$t('Unsaved version found locally'), this.$t('Alert'), {
-					showClose: false,
-					closeOnClickModal: false,
-					closeOnPressEscape: false,
-					confirmButtonText: this.$t('Local Version'),
-					cancelButtonText: this.$t('Remote Version'),
-					type: 'warning'
-				}).then(() => {
-					this.loadLocalVersion(projectID);
-				}).catch((e) => {
-					if (e === 'cancel') {
-						this.loadRemoteVersion(projectID);
-					} else {
-						console.log(e);
-					}
-				});
-			} else {
-				this.loadRemoteVersion(projectID);
-			}
+		mounted() {
+			this.loadProject();
 		},
 		methods: {
+			async loadProject(){
+				const {projectID} = this.$route.params;
+				if (await this.localVersionExist(projectID)) {
+					this.$confirm(this.$t('Unsaved version found locally'), this.$t('Alert'), {
+						showClose: false,
+						closeOnClickModal: false,
+						closeOnPressEscape: false,
+						confirmButtonText: this.$t('Local Version'),
+						cancelButtonText: this.$t('Remote Version'),
+						type: 'warning'
+					}).then(() => {
+						this.loadLocalVersion(projectID);
+					}).catch((e) => {
+						if (e === 'cancel') {
+							this.loadRemoteVersion(projectID);
+						} else {
+							console.log(e);
+						}
+					});
+				} else {
+					this.loadRemoteVersion(projectID);
+				}
+			},
 			loadLocalVersion(projectID) {
-				this.loadFromLocal(projectID)
+				this.ready = false;
+				this.loadFromLocal(projectID);
+				this.$nextTick(()=>{
+					this.ready = true;
+				});
 			},
-			loadRemoteVersion(projectID) {
+			async loadRemoteVersion(projectID) {
 				if (projectID) {
-					playWaiting(this.loadFromRemote(projectID), this.$t('Preparing')).catch(e => {
+					this.ready = false;
+					await playWaiting(this.loadFromRemote(projectID), this.$t('Preparing')).catch(e => {
 						this.$alert(this.$t('Project does not exist'), this.$t('Alert'), {
 							confirmButtonText: this.$t('Confirm'),
 							callback: action=>{
@@ -87,6 +105,7 @@
 							}
 						});
 					});
+					this.ready = true;
 				} else {
 					this.$router.push({name: 'home'})
 				}