routing for vault

src/app/vault/vault.component.html

@@ -7,16 +7,16 @@
                        (onAddCipher)="addCipher($event)">
     </app-vault-ciphers>
     <app-vault-view id="details"
-                    *ngIf="cipherId && details === 'view'"
+                    *ngIf="cipherId && action === 'view'"
                     [cipherId]="cipherId"
                     (onEditCipher)="editCipher($event)">
     </app-vault-view>
     <app-vault-edit id="details"
-                    *ngIf="cipherId && details === 'edit'"
+                    *ngIf="cipherId && action === 'edit'"
                     [cipherId]="cipherId">
     </app-vault-edit>
     <app-vault-add id="details"
-                   *ngIf="details === 'add'"
+                   *ngIf="action === 'add'"
                    [folderId]="null">
     </app-vault-add>
 </div>

src/app/vault/vault.component.ts

@@ -5,6 +5,13 @@ import {
     OnInit,
 } from '@angular/core';
 
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import { Location } from '@angular/common';
+
 import { CipherService } from 'jslib/abstractions/cipher.service';
 
 import { CipherView } from 'jslib/models/view/cipherView';
@@ -16,26 +23,47 @@ import { CipherView } from 'jslib/models/view/cipherView';
 export class VaultComponent implements OnInit {
     ciphers: CipherView[];
     cipherId: string;
-    details: string;
+    action: string;
 
-    constructor(private cipherService: CipherService) {
+    constructor(private cipherService: CipherService, private route: ActivatedRoute, private router: Router,
+        private location: Location) {
     }
 
     async ngOnInit() {
         this.ciphers = await this.cipherService.getAllDecrypted();
+
+        this.route.queryParams.subscribe((params) => {
+            if (params['cipherId']) {
+                if (params['action'] === 'edit') {
+                    this.editCipher(params['cipherId']);
+                } else {
+                    this.viewCipher(params['cipherId']);
+                }
+            } else if (params['action'] === 'add') {
+                this.addCipher();
+            }
+        });
     }
 
     viewCipher(id: string) {
         this.cipherId = id;
-        this.details = 'view';
+        this.action = 'view';
+        this.go({ action: this.action, cipherId: id });
     }
 
     editCipher(id: string) {
         this.cipherId = id;
-        this.details = 'edit';
+        this.action = 'edit';
+        this.go({ action: this.action, cipherId: id });
     }
 
     addCipher() {
-        this.details = 'add';
+        this.action = 'add';
+        this.go({ action: this.action });
+    }
+
+    private go(queryParams: any) {
+        const url = this.router.createUrlTree(['vault'], { queryParams: queryParams }).toString();
+        this.location.go(url);
     }
 }