Some history handling

src/main.js

@@ -14,14 +14,14 @@ import Login from './views/Login.vue';
 import Home from './views/Home.vue';
 
 const routes = [
-  { path: '/home', component: Home },
+  { path: '/home/:appId?/:currentPath*', component: Home },
   { path: '/login', component: Login },
 ];
 
 const router = createRouter({
   // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
   history: createWebHashHistory(),
-  routes, // short for `routes: routes`
+  routes,
 });
 
 const app = createApp(App);

src/views/Home.vue

@@ -85,9 +85,12 @@ export default {
   },
   watch: {
     selectedApp(newApp, oldApp) {
+      this.$router.push(`/home/${newApp.id}`);
+      this.currentPath = '/';
       this.loadApp(newApp.id);
     },
     currentPath(newCurrentPath, oldCurrentPath) {
+      if (this.selectedApp) this.$router.push(`/home/${this.selectedApp.id}${this.currentPath}`);
       this.loadCurrentPath();
     }
   },
@@ -101,7 +104,6 @@ export default {
     },
     onGoUp() {
       this.currentPath = sanitize(this.currentPath.split('/').slice(0, -1).join('/'));
-      console.log('---', this.currentPath)
     },
     onItemActivated(item) {
       if (item.type === 'directory') this.currentPath = sanitize(this.currentPath + '/' + item.name);
@@ -141,6 +143,11 @@ export default {
 
     this.selectedApp = this.apps.find(a => a.id === 'e78a515c-2153-48a6-aa62-badd6a540d4e');
     if (this.selectedApp) this.loadApp(this.selectedApp.id);
+
+    this.$watch(() => this.$route.params, (toParams, previousParams) => {
+      this.selectedApp = this.apps.find(a => a.id === toParams.appId);
+      this.currentPath = toParams.currentPath ? `/${toParams.currentPath.join('/')}` : '/';
+    });
   }
 };