質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.36%

vue.js(vue router)でパスは変わるが画面遷移ができない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 605

score 216

2/17追記(router-viewとrouter.jsの修正)

環境、ファイル構成

ruby on rails 6
vue.js
vue-router
axios

app
・javascript
・・login.vue
・・Users.vue
・・routes
・・・login_router.js
・・packs
・・・login.js

やりたいこと

ログイン画面(login.vue)からログインして成功(200が返される)したら、router.pushを用いてUsers.vueという画面に遷移し表示を行いたい。(vue-routerを用いたSPAを想定してます)

問題

ログイン成功後router.pushによりusers.vueを呼び出しているのは確認できる(users.vueのscript書いてあるgetメソッド呼び出される)が、画面が切り替わらずログイン画面のままでrouter-viewタグを記載しているがusers.vueのviewが描画されない。
またurlが少し変化するのみで画面の遷移はされない。
http://localhost:3000/api/v1/auth/sign_in#/ =>  http://localhost:3000/users

該当のソースコード

//login_lougter.js
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
import users from "../Users.vue";


const router = new Router([
  {
    path: "/users",
    name: "User",
    component: users,
  }
]);

const route = new Router({
  routes: route,
  base: process.env.BASE_URL,
  mode: 'history'
});

export default route;
<!-- login.vue -->
<template>
    <div>
        <div id="login">
            <el-form>
                <el-form-item label="メールアドレス" prop="email">
                    <el-input id="email" type="email" v-model="email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="パスワード" prop="password">
                    <el-input id="password" type="password" v-model="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-button type="primary" @click="onSubmit" >ログイン</el-button>
            </el-form>
       <router-view/> ⭐️追記
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import router from './router/login_router.js';
export default{
    data: function() {        
        return{
      /* 省略 */
        }
    },
    methods: {
        onSubmit: function() {
            axios
                .post("http://localhost:3000/api/v1/auth/sign_in", {
                email: this.email,
                password: this.password,
                })
                .then((response) => {
                  ⭐️ router.push('/users');⭐️/*ここで画面遷移を行いたい*/
                })
                .catch(error => {
                    alert(error);
                })
        }
    }
}
</script>
//users.vue
<template>
  <div id="users">
      users
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "users",
  data: function() {        
    return{
      users: "",
    }
  },
  methods:{
    async getAccountData() {
      ⭐️ axios
        .get('http://localhost:3000/api/v1/users');  /* このメソッドは呼び出せているがhtmlが描画されない*/⭐️
    }
  },
  async mounted(){
    this.getAccountData();
  },
}
</script>


とりあえずログインフォームから、Users.vueに記載されているようにusersという文字列が表示されたら個人的に成功なのですが
users.vueのスクリプトは呼び出しているが画面が切り替わらず、そのままな理由がわかりません。
users.vueの画面( html)を表示するにあたり、何か記載が足らない箇所があるのでしょうか?
追記修正依頼は随時承っております。
お手数をおかけしますが、よろしくおお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

login_router.jsの書き方を間違っていました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る