title: How to redirect to a page with an object in vue
body: <p>I have a couple of vue pages, one page is a list of users, the second is a list of permissions and the third is a vue component
  that displays the list of users and another vue component that shows the details of a user.</p>
  <p>What I'm trying to do is, if I'm on the permissions page and I would like to go to a specific user's details I would like to redirect
  with that panel open.</p>
  <p>I am able to redirect the the users page by doing <code>window.location.href = '/admin/users';</code> but I'm not sure how I'm going to get
  the user panel open.</p>
  <p>I thought that if I could do <code>$emit</code> then that could pass the user object over to the users main page, but that won't work if I do
  a <code>window.location.href = '/admin/users';</code></p>
  <p>Here is my code. This has 2 components displays a list of users and their details</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-md-6&quot;&gt;
              &lt;users :emit=&quot;emit&quot; :users=&quot;users&quot;&gt;&lt;/users&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-md-6&quot;&gt;
              &lt;detail v-if=&quot;userDetails&quot; :emit=&quot;emit&quot; :user=&quot;manageUser&quot;&gt;&lt;/detail&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: ['emit', 'users'],
          data() {
              return {
                  userDetails: false,
                  manageUser: null
              }
          },
          mounted() {
              this.emit.$on('user', payload =&gt; {
                  this.manageUser = payload.user;
                  this.userDetails = true;
              });
          }
      }
  &lt;/script&gt;
  </code></pre>
  <p>This is my users lists</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;card&quot;&gt;
          &lt;div class=&quot;card-header&quot;&gt;
              &lt;h3 class=&quot;card-title text-success&quot; style=&quot;cursor: pointer;&quot; @click=&quot;createUser&quot;&gt; New User&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class=&quot;card-body&quot;&gt;
              &lt;table class=&quot;table table-sm table-striped&quot;&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Name&lt;/th&gt;
                          &lt;th style=&quot;width:120px;&quot;&gt;&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                    &lt;tr v-for=&quot;user in users&quot;&gt;
                        &lt;td&gt;{{user.name}}&lt;/td&gt;
                        &lt;td style=&quot;text-align: right;&quot;&gt;
                          &lt;button class=&quot;btn btn-sm btn-outline-info&quot; @click=&quot;detail(user)&quot;&gt;Details&lt;/button&gt;
                        &lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: ['emit', 'users'],
          data() {
              return {
  
              }
          },
          methods: {
              detail(user) {
                  this.emit.$emit('user', { user: user });
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  <p>and this is my permissions pages</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;card&quot;&gt;
          &lt;div class=&quot;card-header&quot;&gt;
              &lt;h3 class=&quot;card-title&quot;&gt;{{permission.name}}&lt;/strong&gt;&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class=&quot;card-body p-0&quot;&gt;
              &lt;table class=&quot;table table-sm table-striped&quot;&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;User Name&lt;/th&gt;
                          &lt;th style=&quot;width:120px;&quot;&gt;&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr v-for=&quot;user in users&quot;&gt;
                          &lt;td&gt;{{user.name}}&lt;/td&gt;
                          &lt;td style=&quot;text-align: right;&quot;&gt;
                            &lt;button class=&quot;btn btn-sm btn-outline-info&quot; @click=&quot;detail(user)&quot;&gt;Details&lt;/button&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: ['emit'],
          data() {
              return {
                users: []
              }
          },
          mounted() {
              this.allUsers();
          },
          methods: {
  
              allUsers() {
                  this.loading = true;
                  axios.get('/users').then(response =&gt; {
                      this.users = response.data.users;
                  });
              },
              detail(user) {
                  window.location.href = '/admin/users';
              }
          }
      }
  &lt;/script&gt;
  </code></pre>