Laravel генерирует URL вместо загрузки запроса на получение

Question

Я работаю с Laravel & Vue.

У меня есть компонент Home.vue с кнопкой, которая связана с Vue-Router с моим List.vue.

List.vueзагружает первые 20 записей из моей БД, это хорошо работает.Но иногда я не загружаю страницу List.vue и вместо этого перенаправляю меня обратно в домашний каталог ('/') с "? SessionId = & userName =" в URL ... это очень утомительно ... как я могу это исправитьэто?

<template>
  <div class="container">
    <form id="logout-form" action="/logout" method="POST" style="display: none;">
      <input type="hidden" name="_token" :value="csrf" />
    </form>

    <div class="jumbotron jumbotron-fluid">
      <p class="lead">Start a new session or join an existing one</p>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
          <div class="container">
            <h5>New session</h5>
          </div>
          <div class="container">
            <form>
              <div class="form-group">
                <input
                  v-model="newSession.sessionName"
                  class="form-control"
                  type="text"
                  name="sessionName"
                  placeholder="My session"
                />
                <p v-if="this.newSession.feedback">{{newSession.feedback}}</p>
              </div>
              <br />
              <button v-on:click.prevent="startSession()" class="button button2">Start new session</button>
            </form>
          </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
          <div class="container">
            <h5>Join session</h5>
          </div>
          <div class="container">
            <form>
              <div class="form-group">
                <input
                  v-model="existingSession.sessionId"
                  class="form-control"
                  type="text"
                  name="sessionId"
                  placeholder="Session ID"
                />
              </div>
              <div class="form-group">
                <input
                  v-model="existingSession.userName"
                  class="form-control"
                  type="text"
                  name="userName"
                  placeholder="Your name"
                />
              </div>
              <p v-if="this.existingSession.feedback">{{existingSession.feedback}}</p>
              <br />
              <button v-on:click.prevent="joinSession()" class="button button2">Join session</button>
              <button class="button button2">
                <!-- <router-link to="/list">List of sessions</router-link>-->
                <a v-link="{path: '/list'}"></a>
                </button> 
                <br />
                <button class="button button2">
<router-link :to="{ path: 'User' }">User</router-link>
                </button>

            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      newSession: {
        sessionName: null,
        sessionId: null,
        feedback: null
      },
      existingSession: {
        sessionId: null,
        userName: null,
        userId: null,
        feedback: null
      },

      csrf: document
        .querySelector('meta[name="csrf-token"]')
        .getAttribute("content")
    };
  },
  methods: {
    startSession() {
      if (this.newSession.sessionName) {
        this.$http
          .post("/sessioncreate", {
            sessionName: this.newSession.sessionName
          })
          .then(
            response => {
              this.newSession.sessionId = response.body;
              const sessionId = this.newSession.sessionId;
              response.headers.get("X-CSRF-TOKEN");
              this.$router
                .push({ name: "Session", params: { sessionId } })
                .catch(err => {});
            },
            () => {
              this.$router.push("/error");
            }
          );
      } else {
        this.newSession.feedback = "You must enter a name of session";
      }
    },
    joinSession() {
      if (this.existingSession.userName && this.existingSession.sessionId) {
        this.$http
          .post("/joinsession", {
            userName: this.existingSession.userName,
            sessionId: this.existingSession.sessionId
          })
          .then(
            data => {
              this.existingSession.userId = data.body;
              this.$router.push(
                "/user/" +
                  this.existingSession.sessionId +
                  "/" +
                  this.existingSession.userId
              );
            },
            () => {
              this.$router.push("/404");
            }
          );
      } else {
        this.existingSession.feedback =
          "You must enter your name and session ID";
      }
    }
  }
};
</script>

<style>
a {
  color: white;
  text-decoration: none;
}

a:hover {
  color: white;
  text-decoration: none;
}
</style>

Это мой List.vue:

<template>
  <div  class="container">
    <table class="table table-hover">
      <br>
      <thead>
        <th width="10%" scope="col">#</th>
        <th wdith="10%" scope="col">Name</th>
        <th width="10%" scope="col">Options</th>
      </thead>
      <tbody>
        <tr v-for="session in sessionsArr" :key="session.sessionId">
          <td >{{session.sessionId}}</td>
          <td>{{session.sessionName}}</td>
          <td>
            <router-link v-bind:to=" '/session/' + session.sessionId "><button class="button button2">Open</button></router-link>
            <router-link v-bind:to=" '/join/' + session.sessionId "><button class="button button2">Join</button></router-link>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sessionsArr: []
    };
  },
  created() {
    this.$http.get('/readsession').then(
      response => {
        this.sessionsArr = response.body;

      },
      response => {
        alert("Unable to read sessions");
        this.$router.push("/");
      }
    );
  }
};
</script>

<style>
</style>