时间戳

首页 > 解决方案 > Vue.js 没有正确更新 URL

php - Vue.js 没有正确更新 URL

问题描述

加入.vue

<template>
  <div class="container join-form">
    <form>
      <div class="container">
        <h2>Join to session</h2>
      </div>
      <div class="form-group">
        <label for="sessionId">Session ID:</label>
        <input v-model="sessionId" class="form-control" type="text" name="sessionId" placeholder="Session ID">
      </div>
      <div class="form-group">
        <label for="userName">Username:</label>
        <input v-model="userName" class="form-control" type="text" name="userName" placeholder="Your name">
      </div>
      <button v-on:click.prevent="joinSession()" class="btn btn-primary">Join session</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: "",
      sessionId: this.$route.params.sessionId,
      userId: null
    };
  },
  methods: {
    joinSession() {
      this.$http
        .post('/joinsession', {
          userName: this.userName,
          sessionId: this.sessionId
        })
        .then(
          data => {
            this.userId = data.body.userId;
            this.$router.push("/user/" + this.sessionId + "/" + this.userId);
          },
          () => {
            this.$router.push("/error");
          }
        );
    }
  }
};
</script>

<style>
.join-form {
  width: 50%;
}
</style>

我想要“/user/{sessionId}/{userId}”，但我有

“ http://projectx.laragon:8090/user/3/[object%20Object],[object%20Object] ”

我该如何解决这个问题？我将 Laravel 与 Vue-Resource &% Vue-Router 结合使用，以便在 App.vue 中的不同 .vue 文件之间切换。这意味着我的 URL 没有主动输入，它只是显示而不从服务器获取。

例如：“user/{userId}/{sessionId}”如果我没有在我的 web.php 中注册它是 404

标签： phplaravelvue.js

解决方案

看来你真的想做

this.$router.push( { path: '/user', params: { sessionId: this.sessionId, userId: this.userId } });

如果它仍然不起作用，请检查您的路由配置和sessionId/userId值。

有关更多信息，请参阅文档

推荐阅读